Javascript 通过复杂的HTML替换简单的HTML元素

简单元素应替换为位于库（其他文件）中的复杂元素

我已经试了很多次了，但不幸的是什么都不管用

---

简单元素：

<div class="image" data-src="http://www.example.com/picture.jpg"></div>

<div>
    <p>Whats going on?!</p>
    <img src="http://www.example.com/picture.jpg">
</div>

复合元素：

<div class="image" data-src="http://www.example.com/picture.jpg"></div>

<div>
    <p>Whats going on?!</p>
    <img src="http://www.example.com/picture.jpg">
</div>

怎么回事

---

这是我尝试过的：

index.html：

<a href="#" id="btnLoad">Load</a>
<div class="container" data-href="http://www.example.com/"></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 
<script>
$(document).ready(function(){
    // .load()
    $("#btnLoad").click(function(){ 
        $('.container').load('/ajax/content.html'); 

        var elms = document.getElementsByClassName('container');
        for (var i = 0; i < elms.length; i++) 
        {
            var mysrc = elms[i].getAttribute("data-href");
            elms[i].children[0].setAttribute("src", mysrc);
        }
    });
  });
</script>

$（文档）.ready（函数（）{
//.load（）
$（“#btnLoad”）。单击（函数（）{
$（'.container'）.load（'/ajax/content.html'）；
var elms=document.getElementsByClassName（'container'）；
对于（变量i=0；i

content.html：

<iframe src="" style="width:500px; height:500px;"></iframe>

---

谢谢你，并致以最良好的祝愿，

---

NoPlan_u

您可以使用以下内容：

var img = document.getElementById("image");
var url = img.getAttribute("data-href");
var new_div = document.createElement("div");
new_div.innerHTML = '<img src="' + url + '" />';

var img=document.getElementById（“图像”）；
var url=img.getAttribute（“数据href”）；
var new_div=document.createElement（“div”）；
new_div.innerHTML=''；

下面是一个jQuery方法。您需要

.replaceWith

方法：

$（文档）.ready（函数（）{
var url=$（“#图像”）.attr（“数据href”）；
$（“#图像”）。替换为（“发生了什么事？！
”）；
});

您好
给定以下HTML：

<div id="image" data-href="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png"></div>
<input type="button" id="myBtn" value="Make It So">



您可以通过以下方式实现所需的结果：

$('#myBtn').click(function() {
  var div = $('#image');
  var newDiv = div.clone();
  var p = $('<p>');
  p.text('Hello World!');
  newDiv.append(p);
  var img = $('<img>');
  img.attr("src", div.data('href'));
  newDiv.append(img);
  div.after(newDiv);
  div.remove();
});

$（'#myBtn'）。单击（函数（）{
var div=$（“#图像”）；
var newDiv=div.clone（）；
var p=$（“”）；
p、 文本（“你好，世界！”）；
新的div.append（p）；
变量img=$（'
这是一本书

说明：

我采取的方法是克隆原始div，修改克隆并向其中添加新元素，将克隆添加到DOM并删除原始div。您只需修改原始div并跳过克隆即可。
不确定如何满足这样的要求，但下面是一种简单的方法

如果您使用的是jQuery-这是现成的-请参阅

以你为例

$（“#图像”）。替换为（“…”）

或使用普通javascript:

var elem = document.getElementById("image");
elem.removeAttribute("data-href")
elem.innerHTML = "<p>.....</p><img..../>"

var elem=document.getElementById（“图像”）；
元素removeAttribute（“数据href”）
elem.innerHTML=“..
”
请分享您的（失败的）方法，我们将支持您修复它们。我刚刚完成；）请您尝试进一步详细解释代码应该做什么，以及它当前错误地做了什么。是否有任何错误记录？这似乎是正确的方法。但我需要从另一个文件加载复杂元素。不幸的是，我必须从另一个文件加载复杂元素。这会让我头疼。@NoPlan\uuuu-如果您愿意的话如果答案对您有效，您需要提出一个包含相关信息的问题。我无法知道您的文件内容是什么样子，也无法确定您应该如何选择文件中的哪些内容来替换目标。您给了我们一个示例，我的答案针对该示例。