无法插入'</部门>&书信电报；部门>'；使用javascript或jquery在html页面中定位_Javascript_Jquery_Html_Css

无法插入'</部门>&书信电报；部门>'；使用javascript或jquery在html页面中定位

javascript jquery html css

无法插入'</部门>&书信电报；部门>'；使用javascript或jquery在html页面中定位,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想在我的html页面中插入这是当前代码： <body> <div id='1'> <p>abc1</p> <p>abc2</p> </div> </body> abc1 abc2 这是插入后我想要的代码： <body> <div id='1'> <p>abc1</p> </div>

我想在我的html页面中插入

这是当前代码：

<body>
   <div id='1'>
      <p>abc1</p>
      <p>abc2</p>
   </div>
</body>


abc1
abc2

这是插入后我想要的代码：

<body>
  <div id='1'>
     <p>abc1</p>
  </div>
  <div id='2'>
     <p>abc2</p>
  </div>
</body>


abc1
abc2

我的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;
   }
}

var bodyTag=document.getElementsByTagName（“body”）[0]；
var divTag=bodyTag.getElementsByTagName（“div”）[0]；
var pCount=divTag.getElementsByTagName（“p”）.length；
var-str=''；
变量插入位置=1；
对于（变量i=0；i'；
}
其他的
{
s+=''+divTag.getElementsByTagName（“p”）[i].innerHTML+''；
s+=str；
}
}

我使用javascript插入innerHTML方法，但它只插入

，而不插入

请帮帮我！多谢各位

试试这个：您可以使用

.after（）

和

.append（）

，如下所示

$(function(){
  //add div2 after div1
  $('#1').after('<div id="2"></div>');
  //append last p to div2
  $('#2').append($('#1 p:last'));  
});

$（函数（）{
//在div1之后添加div2
$（'#1'）。在（''）之后；
//将最后一个p追加到div2
$（'#2'）。追加（$（'#1 p:last'））；
});

var bodyTag=document.getElementsByTagName（“body”）[0]；
var divTag=bodyTag.getElementsByTagName（“div”）[0]；
var pCount=divTag.getElementsByTagName（“p”）.length；
var-str=''；
变量插入位置=1；
对于（变量i=0；i'；
}
}
str+=''；
bodyTag.innerHTML+=str

abc1
abc2

var pEls=document.getElementsByTagName（'p'），
parentDivEl=document.getElementById（'1'），
targetPEl=parentDivEl.removeChild（pEls[1]）；
var divEl=document.createElement（'div'）；
divEl.id=“2”；
附加子对象（targetPEl）；
parentDivEl.parentNode.insertBefore（divEl，parentDivEl.nextSibling）

abc1
abc2
这个很有趣。我最初尝试使用insertAdjacentHTML函数在第一个
之后插入字符串“
”，但奇怪的是，Dom会自动将这些div重新排列为“
”
因此，下一个最好的选择就是手动操作。我不确定这是否适用于您的情况，但它确实可以用较少的javascript输出所需的结果
看看这把小提琴。

var div1=document.getElementById（'1'）；
var ps=div1.0儿童；
第1分部：移除儿童（ps[1]）；
第1部分插入相邻TML（'afterend'，'abc2'）；

1） 通过其ID获取div，并将其分配给变量“div1”

2） 访问div的2个子
，并将它们分配给“ps”

3） 移除第二个


4） 插入整个第二个
及其子

让我知道这是否适合你的情况。如果没有，我相信我们可以想出更有创意的东西。
非常感谢。我想节省处理时间，所以我找到了这样插入代码的方法。但似乎没有办法插入。所以，正确的方法是将这个分区中的孩子们转移到另一个分区。感谢您的解决方案：）最好按照下面的回答使用jQuery，我考虑过这个解决方案。这意味着把一个房间里的孩子搬到另一个房间。因为我有很多标记，所以我想找到插入的方法来节省时间。无论如何，你的解决方案是准确的。非常感谢你，西德洛克。谢谢你的解决方案，贾斯汀：）
var div1 = document.getElementById('1');
var ps = div1.children;
div1.removeChild(ps[1]);
div1.insertAdjacentHTML('afterend','<div id="2"><p>abc2</p></div>');