Javascript append HTML to a variable that holds HTML

Question

I have Javascript variable let's say named HTMLvar that holds HTML code meaning if i

console.log(HTMLvar)

i get this result so the variable holds pure HTML code:

<div id="erpage-messagespage" class="xhide">
    lot of divs here
    <div id="msgscntr">
        lot of html divs here too
    </div>
    lot of divs here too
</div>

what i want is to append some data (HTML)

var HTMLnewdata = MY NEW APPENDED DATA HERE

at the beginning of the div with id=msgscntr. so the result after appending that data will be something like this when i console log that HTMLvar again.

<div id="erpage-messagespage" class="xhide">
    lot of divs here
    <div id="msgscntr">
        " MY NEW APPENDED DATA HERE " 
        lot of html divs here too
    </div>
    lot of divs here too
</div>

i hope you guys understand what i'm trying to achieve here, using Javascript of course. thanks in advance

please can you be clear on something you want to append data to the div or adding new html data to the variable ??! — moath naji
– moath naji, Commented Nov 12, 2017 at 22:42
@moathnaji i have two variable that contain HTML i want to add one inside a div that exist in the first one. so when i do console.log(first div) i want to see the contant of the second div inside the first one. i hope you understand what i mean — ler
– ler, Commented Nov 12, 2017 at 22:48
yes thank's , you will work with variable as string manipulation using astIndexOf() the id then use the concat() function to append the new string you can use this link to find the string functions and use them . techrepublic.com/article/manipulating-strings-with-javascript — moath naji
– moath naji, Commented Nov 12, 2017 at 22:56

AndreFeijo · Accepted Answer · 2017-11-12 22:56:38Z

3

I am assuming HTMLvar is a string.

// Parse the string as HTML
var parser = new DOMParser();
var htmlDoc = parser.parseFromString(HTMLvar, 'text/html');

// Get your element
var msgCntr = htmlDoc.getElementById('msgscntr');

// Do your logic here, append whatever you need

// When you done this will return as string again
var HTMLnewdata = htmlDoc.body.innerHTML;

answered Nov 12, 2017 at 22:56

AndreFeijo

10.7k7 gold badges40 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

P.S. · Accepted Answer · 2017-11-12 23:29:58Z

0

Here is the working example, if anything isn't clear, feel free to ask:

var starterHtml = `
  <div id="erpage-messagespage" class="xhide">
    lot of divs here
    <div id="msgscntr">
        lot of html divs here too
    </div>
    lot of divs here too
  </div>
`;
var index = starterHtml.indexOf('>')
var final = starterHtml.slice(0, index + 1) + "!!!CONTENT GOES HERE!!! <br>" + starterHtml.slice(index + 1);
var wrapper = document.getElementById('final'); 
wrapper.insertAdjacentHTML('afterend', final)

<div id="final"></div>

edited Nov 12, 2017 at 23:29

answered Nov 12, 2017 at 23:03

P.S.

16.4k14 gold badges65 silver badges86 bronze badges

2 Comments

ler Over a year ago

the whole problem is that i don't have that HTML in the DOM it exist only in a variable . i will explain more. i'm working in a single page application for example i have two pages A and B . so when i'm in page B the content of A exist only in a variable it doesn't exit in the DOM . if i'm in page A i can easily append the new data. but if i'm in the other page i don't have the content of page A in the DOM anymore so i want to append that data that i get from AJAX to the content of page A that exist only in a variable not on DOM if that make sence

P.S. Over a year ago

@ler, easy, I have updated my answer. Now I started with stringified HTML, I think it's very close to your case.

Jon P · Accepted Answer · 2017-11-13 00:03:15Z

0

You can create an in memeory DOM element and work with that:

var starterHtml = `
  <div id="erpage-messagespage" class="xhide">
    lot of divs here
    <div id="msgscntr">
        lot of html divs here too
    </div>
    lot of divs here too
  </div>
`;

//Create a DOM element
var holder = document.createElement("div");
//Load it with your HTML
holder.innerHTML = starterHtml;
//Find your target element and insert your string
holder.querySelector("#msgscntr").innerHTML = "!!My New Awesome content<br>" + holder.querySelector("#msgscntr").innerHTML;
//Get the inner HTML back
var finalHtml = holder.innerHTML;
//and you're done
console.log(finalHtml);

answered Nov 13, 2017 at 0:03

Jon P

19.9k8 gold badges52 silver badges76 bronze badges

Collectives™ on Stack Overflow

Javascript append HTML to a variable that holds HTML

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related