Copy HTML from element, replace text with jQuery, then append to element












1















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)










share|improve this question























  • why are you writing html code inside <script id="tpl_dashboard_portlet" type="text/html">

    – secret super star
    Nov 21 '18 at 15:37











  • I found it online before and liked the idea. Not really sure what its benefits could/would be for this, apart from not needing to add the hidden attribute. I just went with it and it worked.

    – Dubz
    Nov 21 '18 at 15:40











  • what does s contains?

    – secret super star
    Nov 21 '18 at 15:50
















1















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)










share|improve this question























  • why are you writing html code inside <script id="tpl_dashboard_portlet" type="text/html">

    – secret super star
    Nov 21 '18 at 15:37











  • I found it online before and liked the idea. Not really sure what its benefits could/would be for this, apart from not needing to add the hidden attribute. I just went with it and it worked.

    – Dubz
    Nov 21 '18 at 15:40











  • what does s contains?

    – secret super star
    Nov 21 '18 at 15:50














1












1








1








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)










share|improve this 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)






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>





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>






javascript jquery html






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 21 '18 at 15:34









DubzDubz

186




186













  • why are you writing html code inside <script id="tpl_dashboard_portlet" type="text/html">

    – secret super star
    Nov 21 '18 at 15:37











  • I found it online before and liked the idea. Not really sure what its benefits could/would be for this, apart from not needing to add the hidden attribute. I just went with it and it worked.

    – Dubz
    Nov 21 '18 at 15:40











  • what does s contains?

    – secret super star
    Nov 21 '18 at 15:50



















  • why are you writing html code inside <script id="tpl_dashboard_portlet" type="text/html">

    – secret super star
    Nov 21 '18 at 15:37











  • I found it online before and liked the idea. Not really sure what its benefits could/would be for this, apart from not needing to add the hidden attribute. I just went with it and it worked.

    – Dubz
    Nov 21 '18 at 15:40











  • what does s contains?

    – secret super star
    Nov 21 '18 at 15:50

















why are you writing html code inside <script id="tpl_dashboard_portlet" type="text/html">

– secret super star
Nov 21 '18 at 15:37





why are you writing html code inside <script id="tpl_dashboard_portlet" type="text/html">

– secret super star
Nov 21 '18 at 15:37













I found it online before and liked the idea. Not really sure what its benefits could/would be for this, apart from not needing to add the hidden attribute. I just went with it and it worked.

– Dubz
Nov 21 '18 at 15:40





I found it online before and liked the idea. Not really sure what its benefits could/would be for this, apart from not needing to add the hidden attribute. I just went with it and it worked.

– Dubz
Nov 21 '18 at 15:40













what does s contains?

– secret super star
Nov 21 '18 at 15:50





what does s contains?

– secret super star
Nov 21 '18 at 15:50












1 Answer
1






active

oldest

votes


















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>








share|improve this answer
























  • I feel like an idiot now... The issue was in fact me using val() rather than text(). Switched it and it's working now. I never knew that about creating new jQuery elements though. I just saw it done that way on other scripts and have been doing it that way since. I'll have to be sure to not do that going forward. Thank you for the help though!!!

    – Dubz
    Nov 21 '18 at 15:55











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53415498%2fcopy-html-from-element-replace-text-with-jquery-then-append-to-element%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









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>








share|improve this answer
























  • I feel like an idiot now... The issue was in fact me using val() rather than text(). Switched it and it's working now. I never knew that about creating new jQuery elements though. I just saw it done that way on other scripts and have been doing it that way since. I'll have to be sure to not do that going forward. Thank you for the help though!!!

    – Dubz
    Nov 21 '18 at 15:55
















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>








share|improve this answer
























  • I feel like an idiot now... The issue was in fact me using val() rather than text(). Switched it and it's working now. I never knew that about creating new jQuery elements though. I just saw it done that way on other scripts and have been doing it that way since. I'll have to be sure to not do that going forward. Thank you for the help though!!!

    – Dubz
    Nov 21 '18 at 15:55














1












1








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>








share|improve this answer













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>








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>





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>






share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 21 '18 at 15:51









Rory McCrossanRory McCrossan

244k29211247




244k29211247













  • I feel like an idiot now... The issue was in fact me using val() rather than text(). Switched it and it's working now. I never knew that about creating new jQuery elements though. I just saw it done that way on other scripts and have been doing it that way since. I'll have to be sure to not do that going forward. Thank you for the help though!!!

    – Dubz
    Nov 21 '18 at 15:55



















  • I feel like an idiot now... The issue was in fact me using val() rather than text(). Switched it and it's working now. I never knew that about creating new jQuery elements though. I just saw it done that way on other scripts and have been doing it that way since. I'll have to be sure to not do that going forward. Thank you for the help though!!!

    – Dubz
    Nov 21 '18 at 15:55

















I feel like an idiot now... The issue was in fact me using val() rather than text(). Switched it and it's working now. I never knew that about creating new jQuery elements though. I just saw it done that way on other scripts and have been doing it that way since. I'll have to be sure to not do that going forward. Thank you for the help though!!!

– Dubz
Nov 21 '18 at 15:55





I feel like an idiot now... The issue was in fact me using val() rather than text(). Switched it and it's working now. I never knew that about creating new jQuery elements though. I just saw it done that way on other scripts and have been doing it that way since. I'll have to be sure to not do that going forward. Thank you for the help though!!!

– Dubz
Nov 21 '18 at 15:55


















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53415498%2fcopy-html-from-element-replace-text-with-jquery-then-append-to-element%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

"Incorrect syntax near the keyword 'ON'. (on update cascade, on delete cascade,)

Alcedinidae

RAC Tourist Trophy