javascript - 根据类名替换开始和结束标记

Question

我想仅使用 javascript 替换开始和结束标记

<span> Hello john</span><div class="replace-class"> John likes to play guitar</div><div>Anna likes to arrange flowers</div>

在上面的示例中，带有 class="replace-class"的 div 标签应替换为标签

。如下

<span> Hello john</span><p> John likes to play guitar</p><div>Anna likes to arrange flowers</div>

提前谢谢

Answer 1

您需要做的是:

1. 选择具有类 replace-class 的元素的 outerHTML
2. 如果您的浏览器支持 outerHTML，则可以轻松替换该元素(如 if block 中)
3. 但是，如果您的浏览器不支持 outerHTML，那么您还需要选择父元素，以便可以将其作为基础并使用 replace-class 替换该元素> 类。

var Obj = document.querySelector('.replace-class'); 
var str = '<p>' + Obj.innerHTML + '</p>';
if(Obj.outerHTML) { 
    Obj.outerHTML=str;
}
else { 
  var tmpObj=document.createElement("p");
  tmpObj.innerHTML= Obj.innerHTML;
  ObjParent=Obj.parentNode;
  ObjParent.replaceChild(tmpObj,Obj);
}

<span> Hello john</span><div class="replace-class"> John likes to play guitar</div><div>Anna likes to arrange flowers</div>

为了进一步验证代码片段，您可以使用浏览器的inspect element并检查该元素。 div 应该替换为 p