將外部HTML加載到DIV

在我的html中我有一個div id =「mainWrapper」，我想插入我在外部js文件中創建的html標記。如何在不消除「MainWrapper」內的任何現有div的情況下做到這一點？我希望外部標記是「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

來源

2016-10-03 Frank DTank De Leon

請參閱[使用JS解析HTML字符串]（http://stackoverflow.com/questions/10585029/parse-a-html-string-with-js）和[Node.appendChild（）]（https：// developer.mozilla.org/en-US/docs/Web/API/Node/appendChild） –

我不知道我明白你想要什麼。但是，如果這是一個節點內追加的HTML沒有失去孩子的，你可以做到這一點，像這樣：

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

jQuery的爲您提供了功能建設：

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

這裏是documentation

來源

2016-10-03 00:15:44 Dionys

那工作，謝謝 –

將外部HTML加載到DIV

回答

相關問題