How to update Html content present in string based on Id using JavaScript?
Question
I have 1. Html String Variable 2. Object containing changes
var htmlString = '\<body>\
<div class="shrek">\
<div class="trck">Object containing\
<div id ="head"> \
<strong>Object containing</strong>\
</div>\
</div>\
</div>\
<div id ="body"> String Variable String Variable String Variable</div>\
<div id ="foot">Similar Questions</div>\
</body>'
var obj = {
'head': '<strong>I</strong> am new head'
}
I want to update the htmlString with new content and pass this variable to service. At end htmlstring should be like
<body>
<div class="shrek">
<div class="trck">Object containing
<div id="head"><strong>I</strong> am new head</div>
</div>
</div>
<div id="body"> String Variable String Variable String Variable</div>
<div id="foot">Similar Questions</div>
</body>
HtmlString pattern can be different, how can I update the string by based on Id.
3 answers
solution1
2 2018-01-18 10:52:27
Firstly be careful with your quotes as you have several mis-matched instances. I'd suggest using ' to delimit the string so that you can use " within it to delimit the attribute values in your HTML.
To solve your actual issue you can use Object.keys() to get the keys from the object, which contain the id attributes to search for, before looping over them to retrieve the elements and set the html() as needed. Try this:
var htmlString = '<div class="shrek"><div class="trck">Object containing<div id="head"><strong>Object containing</strong></div></div></div><div id="body"> String Variable String Variable StringVariable</div><div id="foot">Similar Questions</div>'; var obj = { 'head': '<strong>I</strong> am new head' } var $html = $(htmlString); Object.keys(obj).forEach(function(k) { $html.find('#' + k).html(obj[k]); }); $html.appendTo('body');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
solution2
1 ACCPTED 2018-01-18 11:01:47
You can create DOM tree in memory and manipulate with this tree with any freedom you want.
parser = new DOMParser(),
doc = parser.parseFromString(xmlString, "text/xml");
In this example you can find element by ID, update content, remove if necessary and then produce result HTML.
var element = doc.getElementById("head");
Please see example below:
var xmlString = `<body> <div class="shrek"><div class="trck">Object containing<div id ="head"> <strong>Object containing</strong></div></div></div> <div id ="body"> String Variable String Variable String Variable</div> <div id ="foot">Similar Questions</div> </body>`, parser = new DOMParser(), doc = parser.parseFromString(xmlString, "text/xml"); var element = doc.getElementById("head"); element.innerHTML = '<strong>I</strong> am new head'; console.log(doc.documentElement.outerHTML);
solution3
0 2018-01-18 10:52:53
First of all, your String is invalid, since you have some double quotes in there. An easy fix is to use backticks instead.
Then, you can transform your String into a Jquery object via $(...) .
You can then loop through your obj and update your HTML accordingly.
var htmlString = `<body> <div class="shrek"><div class="trck">Object containing<div id ="head"> <strong>Object containing</strong></div></div></div> <div id ="body"> String Variable String Variable String Variable</div> <div id ="foot">Similar Questions</div> </body>`; var obj = { 'head':'<strong>I</strong> am new head' } var html = $(htmlString); $.each(obj,function(id,val){ $('#'+id,html).html(val); }); $('body').append(html);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.