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> -
1See Parse a HTML String with JS and Node.appendChild()Ronnie Smith– Ronnie Smith2016年10月03日 00:53:03 +00:00Commented Oct 3, 2016 at 0:53
1 Answer 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
answered Oct 3, 2016 at 0:15
Dionys
3,1431 gold badge21 silver badges29 bronze badges
Sign up to request clarification or add additional context in comments.
Comments
default