从元素复制 HTML，用 jQuery 替换文本，然后附加到元素

Question

I am trying to create portlets on my website which are generated when a user inputs a number and clicks a button.

I have the HTML in a script tag (that way it's invisible). I am able to clone the HTML contents of the script tag and append it to the necessary element without issue. My problem is, I cannot seem to modify the text inside the template before appending it.

This is a super simplified version of what I'd like to do. I'm just trying to get parts of it working properly before building it up more.

Here is the script tag with the template:

 var p = $("#tpl_dashboard_portlet").html(); var h = document.createElement('div'); $(h).html(p); $(h).find('div.m-portlet').data('s', s); $(h).find('[data-key="number"]').val(s); $(h).find('[data-key="name"]').val("TEST"); console.log(h); console.log($(h).html()); console.log(s); $("div.m-content").append($(h).html());

 <script id="tpl_dashboard_portlet" type="text/html"> <!--begin::Portlet--> <div class="m-portlet"> <div class="m-portlet__head"> <div class="m-portlet__head-caption"> <div class="m-portlet__head-title"> <h3 class="m-portlet__head-text"> <span data-key="number"></span> [<span data-key="name"></span>] </h3> </div> </div> <div class="m-portlet__head-tools"> <ul class="m-portlet_nav"> <li class="m-portlet__nav-item"> <a href="javascript:void(0)" class="m-portlet__nav-link m-portlet__nav-link--icon"><i class="la la-close"></i></a> </li> </ul> </div> </div> <!--begin::Form--> <div class="m-portlet__body"> Found! <span data-key="number"></span> [<span data-key="name"></span>] </div> </div> <!--end::Portlet--> </script>

I'm not sure what I'm doing wrong here. I've tried using .each as well with no luck. Both leave the value of the span tags empty.

(I've removed some of the script, but the variable s does have a value on it)

Answer 1

You have two issues here. Firstly, every time you call $(h) you're creating a new jQuery object from the original template HTML. As such any and all previous changes you made are lost. You need to create the jQuery object from the template HTML once , then make all changes to that object.

Secondly, the span elements you select by data-key attribute do not have value properties to change, you instead need to set their text() . Try this:

 var s = 'foo'; var p = $("#tpl_dashboard_portlet").html(); var $h = $('<div />'); $h.html(p); $h.find('div.m-portlet').data('s', s); $h.find('[data-key="number"]').text(s); $h.find('[data-key="name"]').text("TEST"); $("div.m-content").append($h.html());

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script id="tpl_dashboard_portlet" type="text/html"> <div class="m-portlet"> <div class="m-portlet__head"> <div class="m-portlet__head-caption"> <div class="m-portlet__head-title"> <h3 class="m-portlet__head-text"> <span data-key="number"></span> [<span data-key="name"></span>] </h3> </div> </div> <div class="m-portlet__head-tools"> <ul class="m-portlet_nav"> <li class="m-portlet__nav-item"> <a href="javascript:void(0)" class="m-portlet__nav-link m-portlet__nav-link--icon"><i class="la la-close"></i></a> </li> </ul> </div> </div> <div class="m-portlet__body"> Found! <span data-key="number"></span> [<span data-key="name"></span>] </div> </div> </script> <div class="m-content"></div>

Answer 2

In my case only this is working:

var template = $('template').clone(true, true); // Copies all data and events
var $h = $('<div />');
$h.html(template);
$h.find('.input-name').attr('value', "your value here"); // Note: .val("your value here") is not working

$('.list').prepend($h.html());