無法插入“ </div><div> '使用javascript或jquery在html頁面中的位置
[英]Cannot insert '</div> <div>' to a position in html page using javascript or jquery
問題描述
我想在我的HTML頁面中插入</div><div id = '2'> ，這是當前代碼：
<body>
<div id='1'>
<p>abc1</p>
<p>abc2</p>
</div>
</body>
這是插入后我想要的代碼：
<body>
<div id='1'>
<p>abc1</p>
</div>
<div id='2'>
<p>abc2</p>
</div>
</body>
我的JavaScript代碼是
var bodyTag = document.getElementsByTagName("body")[0];
var divTag = bodyTag.getElementsByTagName("div")[0];
var pCount = divTag.getElementsByTagName("p").length;
var str = '</div><div id = "2">';
var insert_pos = 1;
for(var i = 0 ; i < pCount; i++)
{
if(i != insert_pos)
{
s += '<p>'+ divTag .getElementsByTagName("p")[i].innerHTML + '</p>';
}
else
{
s += '<p>'+ divTag .getElementsByTagName("p")[i].innerHTML + '</p>';
s += str;
}
}
我使用javascript插入了innerHTML方法，但只插入了<div id = '2'> ， </div>未插入。
請幫我！ 非常感謝你！
5 個解決方案
解決方案1
5 2015-02-04 04:48:48
試試看：您可以使用.after()和.append() ，如下所示
$(function(){
//add div2 after div1
$('#1').after('<div id="2"></div>');
//append last p to div2
$('#2').append($('#1 p:last'));
});
解決方案2
0 2015-02-04 04:59:30
var bodyTag = document.getElementsByTagName("body")[0]; var divTag = bodyTag.getElementsByTagName("div")[0]; var pCount = divTag.getElementsByTagName("p").length; var str = '<div>'; var insert_pos = 1; for(var i = 0 ; i < pCount; i++) { if(i == insert_pos) { str += '<p>'+ divTag .getElementsByTagName("p")[i].innerHTML + '</p>'; } } str+='</div>'; bodyTag.innerHTML+=str;
<body> <div id='1'> <p>abc1</p> <p>abc2</p> </div> </body>
我認為這可以實現。
解決方案3
0 2015-02-04 05:06:09
var pEls = document.getElementsByTagName('p'), parentDivEl = document.getElementById('1'), targetPEl = parentDivEl.removeChild(pEls[1]); var divEl = document.createElement('div'); divEl.id = "2"; divEl.appendChild(targetPEl); parentDivEl.parentNode.insertBefore(divEl, parentDivEl.nextSibling);
<body> <div id='1'> <p>abc1</p> <p>abc2</p> </div> </body>
使用Javascript，您可以...
var pEls = document.getElementsByTagName('p'), parentDivEl = document.getElementById('1'), targetPEl = parentDivEl.removeChild(pEls[1]); var divEl = document.createElement('div'); divEl.id = "2"; divEl.appendChild(targetPEl); parentDivEl.parentNode.insertBefore(divEl, parentDivEl.nextSibling);
解決方案4
0 2015-02-04 05:32:37
這個很有趣。 我最初嘗試使用insertAdjacentHTML函數在第一個<p>之后插入字符串</div><div id="2"> '，但是奇怪的是，Dom會自動將這些div重新排列為' <div id="2"></div> '。
因此，下一個最佳選擇是手動完成操作。 我不確定這是否能在您的情況下使用，但確實會以較少的JavaScript輸出期望的結果。
看看這個小提琴。 http://jsfiddle.net/justinbchristensen/k2y2uggj/
var div1 = document.getElementById('1');
var ps = div1.children;
div1.removeChild(ps[1]);
div1.insertAdjacentHTML('afterend','<div id="2"><p>abc2</p></div>');
1）通過其ID獲取div，並將其分配給變量'div1'
2）訪問div的2個子<p>並將它們分配給'ps'
3）刪除第二個<p>
4）插入第二個<div>及其子<p>
讓我知道這是否適合您的情況。 如果沒有，我相信我們可以提出一些更有創意的東西。
解決方案5
0 2015-02-04 08:13:34
非常感謝你。 我想節省處理時間，所以我找到了插入類似代碼的方法。 但是似乎沒有辦法插入。 因此，正確的做法是將該div中的子級移到另一個。 感謝您的解決方案:)
使用JQuery / Javascript將文本插入html div表的特定單元格中？
[英]Using JQuery/Javascript to insert text into specific cells of a html div table?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.