2016-10-03 4 views
0

В моем html у меня есть div id = "mainWrapper", который я хочу вставить html-разметку, которую я создал во внешнем js-файле. Как я могу это сделать, не исключая любые существующие div внутри «MainWrapper»? Я хочу, чтобы внешняя разметка была дочерью «mainWrapper». Ниже мой внешний JS-файл и HTML-файл.Загрузка внешнего HTML в DIV

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

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

 

 

 
function renderLB(){ 
 

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

 
\t \t renderMarkup(markup); 
 

 
} 
 

 
renderLB(); 
 

 

 
function renderMarkup(markup){ 
 

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

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

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

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

 
\t } 
 

 
\t </style> 
 

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

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

 
</body> 
 
</html> \t

+1

См. [Анализ строки HTML с помощью JS] (http://stackoverflow.com/questions/10585029/parse-a-html-string-with-js) и [Node.appendChild()] (https: // developer.mozilla.org/en-US/docs/Web/API/Node/appendChild) –

ответ

1

Я не уверен, что я понял, что вы хотите. Но если это для добавления HTML в пределах узла без потери Чайлдс, вы можете сделать это следующим образом:

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

Jquery дает вам эту функцию сборки в:

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

вот documentation

+0

Эта работа, спасибо –

Смежные вопросы