0

In my html I have a div id="mainWrapper" that I want to insert html markup that I created in an external js file. How can I do this without eliminating any existing divs inside "MainWrapper"? I want the external markup to be a child of "mainWrapper". Below is my external JS file and the HTML file.

//External mainScript.js file//
var pageContent = {

 skinImg: "images/staticTO_SKIN_000000.jpg",
 leaderBoardImg: "images/staticTO_LEADERBOARD.jpg"
}



function renderLB(){

 var markup ='\
  <div id="leaderBoard"><img src='+pageContent.leaderBoardImg+'> </div>\
  <style>\
   #leaderBoard{width:1200px; height:82px; position:relative;top:0px}\
   #pageContent{top: 65px;}\
   </style>'

  renderMarkup(markup);

}

renderLB();


function renderMarkup(markup){

 
}
<html>
<head>
 <title> </title>
 <style>

 body{
  padding: 0px;
  margin: 0px;
 }

 #mainWrapper{
  width: 1200px;
  margin: 0 auto;
  height: auto;
 }

 #pageContent{
  position: relative;
  width: 1200px;
  height: 953px;

 }

 </style>

</head>
<body id="body">

 <div id="mainWrapper">
  <div id="pageContent"><img src="images/pageSkin.jpg">  </div>
 <div> 
  <script src="mainScript.js">  </script>

</body>
</html>
Frank DTank De Leon
  • 11
  • 5
  • 1
    See [Parse a HTML String with JS](http://stackoverflow.com/questions/10585029/parse-a-html-string-with-js) and [Node.appendChild()](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild) – Ronnie Royston Oct 03 '16 at 00:53

1 Answers1

1

I'm not sure I understood what you want. But if that is to append html within a node without loosing childs, you could do it like so:

function renderMarkup(markup) {
  var main_wrapper = document.getElementById('mainWrapper');
  main_wrapper.innerHTML += markup;
}

Jquery gives you that function build in:

$('#mainWrapper').append(markup);

here is the documentation

Dionys
  • 3,083
  • 1
  • 19
  • 28