当前位置：文江博客话题详情

是否可以在不破坏后代＆＃x27的情况下附加到Innerhtml。活动听众？

发布于 2025-02-11 04:17:30 字数 724 浏览 3 评论 0 原文

在以下示例代码中，我将 onclick 事件处理程序附加到包含文本“ foo”的跨度。处理程序是一个匿名功能，可弹出 alert（）。

但是，如果我分配给父节点的 Innerhtml ，则此 onclick 事件处理程序被销毁 - 单击“ foo”将无法弹出警报框。

这可以解决吗？

<html>
 <head>
 <script type="text/javascript">

  function start () {
    myspan = document.getElementById("myspan");
    myspan.onclick = function() { alert ("hi"); };

    mydiv = document.getElementById("mydiv");
    mydiv.innerHTML += "bar";
  }

 </script>
 </head>

 <body onload="start()">
   <div id="mydiv" style="border: solid red 2px">
     <span id="myspan">foo</span>
   </div>
 </body>

</html>

原文

In the following example code, I attach an onclick event handler to the span containing the text "foo". The handler is an anonymous function that pops up an alert().

However, if I assign to the parent node's innerHTML, this onclick event handler gets destroyed - clicking "foo" fails to pop up the alert box.

Is this fixable?

<html>
 <head>
 <script type="text/javascript">

  function start () {
    myspan = document.getElementById("myspan");
    myspan.onclick = function() { alert ("hi"); };

    mydiv = document.getElementById("mydiv");
    mydiv.innerHTML += "bar";
  }

 </script>
 </head>

 <body onload="start()">
   <div id="mydiv" style="border: solid red 2px">
     <span id="myspan">foo</span>
   </div>
 </body>

</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

属性 2025-02-18 04:17:30

使用 .insertadjacenthtml（）活动听众，都得到了所有主要浏览器的支持。这是 .innerhtml 的简单单行替换。

var html_to_insert = "<p>New paragraph</p>";

// with .innerHTML, destroys event listeners
document.getElementById('mydiv').innerHTML += html_to_insert;

// with .insertAdjacentHTML, preserves event listeners
document.getElementById('mydiv').insertAdjacentHTML('beforeend', html_to_insert);

'trofennem'参数指定插入HTML内容的元素中的位置。选项是'之前的'，'autherbegin'，'trofenend'和'rafterend'。它们相应的位置是：

<!-- beforebegin -->
<div id="mydiv">
  <!-- afterbegin -->
  <p>Existing content in #mydiv</p>
  <!-- beforeend -->
</div>
<!-- afterend -->

Using .insertAdjacentHTML() preserves event listeners, and is supported by all major browsers. It's a simple one-line replacement for .innerHTML.

var html_to_insert = "<p>New paragraph</p>";

// with .innerHTML, destroys event listeners
document.getElementById('mydiv').innerHTML += html_to_insert;

// with .insertAdjacentHTML, preserves event listeners
document.getElementById('mydiv').insertAdjacentHTML('beforeend', html_to_insert);

The 'beforeend' argument specifies where in the element to insert the HTML content. Options are 'beforebegin', 'afterbegin', 'beforeend', and 'afterend'. Their corresponding locations are:

<!-- beforebegin -->
<div id="mydiv">
  <!-- afterbegin -->
  <p>Existing content in #mydiv</p>
  <!-- beforeend -->
</div>
<!-- afterend -->

回复收藏 0 原文

等数载，海棠开 2025-02-18 04:17:30

不幸的是，即使您试图附加，分配给 inninhtml 也会造成所有子元素的破坏。如果要保留子节点（及其活动处理程序），则需要使用：

function start() {
    var myspan = document.getElementById("myspan");
    myspan.onclick = function() { alert ("hi"); };

    var mydiv = document.getElementById("mydiv");
    mydiv.appendChild(document.createTextNode("bar"));
}

编辑：鲍勃的解决方案，来自评论。发布您的答案，鲍勃！为此获得信用。 :-)

function start() {
    var myspan = document.getElementById("myspan");
    myspan.onclick = function() { alert ("hi"); };

    var mydiv = document.getElementById("mydiv");
    var newcontent = document.createElement('div');
    newcontent.innerHTML = "bar";

    while (newcontent.firstChild) {
        mydiv.appendChild(newcontent.firstChild);
    }
}

Unfortunately, assignment to innerHTML causes the destruction of all child elements, even if you're trying to append. If you want to preserve child nodes (and their event handlers), you'll need to use DOM functions:

function start() {
    var myspan = document.getElementById("myspan");
    myspan.onclick = function() { alert ("hi"); };

    var mydiv = document.getElementById("mydiv");
    mydiv.appendChild(document.createTextNode("bar"));
}

Edit: Bob's solution, from the comments. Post your answer, Bob! Get credit for it. :-)

function start() {
    var myspan = document.getElementById("myspan");
    myspan.onclick = function() { alert ("hi"); };

    var mydiv = document.getElementById("mydiv");
    var newcontent = document.createElement('div');
    newcontent.innerHTML = "bar";

    while (newcontent.firstChild) {
        mydiv.appendChild(newcontent.firstChild);
    }
}

回复收藏 0 原文

或十年 2025-02-18 04:17:30

现在，是2012年，JQuery的附加和预端功能可以准确地添加内容，而不会影响当前内容。非常有用。

回复收藏 0 原文

没有伤那来痛 2025-02-18 04:17:30

我创建了标记将其插入字符串，因为它的代码较少，并且更易于阅读，而不是使用Fancy Dom的东西。

然后，我将其变为临时元素的Innerhtml，这样我就可以抓住该元素的唯一子女并附着在身体上。

var html = '<div>';
html += 'Hello div!';
html += '</div>';

var tempElement = document.createElement('div');
tempElement.innerHTML = html;
document.getElementsByTagName('body')[0].appendChild(tempElement.firstChild);

I created my markup to insert as a string since it's less code and easier to read than working with the fancy dom stuff.

Then I made it innerHTML of a temporary element just so I could take the one and only child of that element and attach to the body.

var html = '<div>';
html += 'Hello div!';
html += '</div>';

var tempElement = document.createElement('div');
tempElement.innerHTML = html;
document.getElementsByTagName('body')[0].appendChild(tempElement.firstChild);

回复收藏 0 原文

謸气贵蔟 2025-02-18 04:17:30

/代码> 可以使用。

const mydiv = document.getElementById("mydiv");
mydiv.append(document.createRange().createContextualFragment(`
    <div>Some HTML here</div>
`));

或只是附加文本：

mydiv.append("some text"); // no need for document.createTextNode

如果您不需要直接插入HTML，请考虑使用DOM方法创建结构：

mydiv.append(
    Object.assign(document.createElement('div'), 
              { textContent: 'some text', className: 'my-class' }),
    document.createElement('hr'),
    "some more text"
); 
// can append multiple elements (mixed with strings which are converted to text nodes)

在相关注释中，相应的 元素＃prepend 方法可以在开始时插入元素（在第一个孩子之前）元素。

Element#append can be used to insert elements at the end of another element. To insert HTML from a string, Range#createContextualFragment can be used.

const mydiv = document.getElementById("mydiv");
mydiv.append(document.createRange().createContextualFragment(`
    <div>Some HTML here</div>
`));

Or to just append text:

mydiv.append("some text"); // no need for document.createTextNode

If you don't need to insert HTML directly, consider using DOM methods to create the structure instead:

mydiv.append(
    Object.assign(document.createElement('div'), 
              { textContent: 'some text', className: 'my-class' }),
    document.createElement('hr'),
    "some more text"
); 
// can append multiple elements (mixed with strings which are converted to text nodes)

On a related note, the corresponding Element#prepend method can be used to insert elements at the start (before the first child) of an element.

回复收藏 0 原文

撩人痒 2025-02-18 04:17:30

还有另一种选择：使用 setAttribute 而不是添加事件侦听器。像这样：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo innerHTML and event listeners</title>
<style>
    div {
        border: 1px solid black;
        padding: 10px;
    }
</style>
</head>
<body>
    <div>
        <span>Click here.</span>
    </div>
    <script>
        document.querySelector('span').setAttribute("onclick","alert('Hi.')");
        document.querySelector('div').innerHTML += ' Added text.';
    </script>
</body>
</html>

There is another alternative: using setAttribute rather than adding an event listener. Like this:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo innerHTML and event listeners</title>
<style>
    div {
        border: 1px solid black;
        padding: 10px;
    }
</style>
</head>
<body>
    <div>
        <span>Click here.</span>
    </div>
    <script>
        document.querySelector('span').setAttribute("onclick","alert('Hi.')");
        document.querySelector('div').innerHTML += ' Added text.';
    </script>
</body>
</html>

回复收藏 0 原文

悲歌长辞 2025-02-18 04:17:30

是的，如果您使用tag属性绑定事件 onclick =“ sayhi（）” 在模板中直接绑定事件，则可能是可能的 - 这种方法类似于框架/vue/vue/react/等。您还可以使用 ＆lt; template＆gt; template＆gt; 在“动态” html上操作，例如在这里。它并不是严格的JS，但是它是可接受的小型项目

function start() {
  mydiv.innerHTML += "bar";
}

function sayHi() {
  alert("hi");
}

<body onload="start()">
  <div id="mydiv" style="border: solid red 2px">
    <span id="myspan" onclick="sayHi()">foo</span>
  </div>
</body>

Yes it is possible if you bind events using tag attribute onclick="sayHi()" directly in template similar like your <body onload="start()"> - this approach similar to frameworks angular/vue/react/etc. You can also use <template> to operate on 'dynamic' html like here. It is not strict unobtrusive js however it is acceptable for small projects

function start() {
  mydiv.innerHTML += "bar";
}

function sayHi() {
  alert("hi");
}

<body onload="start()">
  <div id="mydiv" style="border: solid red 2px">
    <span id="myspan" onclick="sayHi()">foo</span>
  </div>
</body>

回复收藏 0 原文

~没有更多了~

关于作者

度的依靠╰つ

暂无简介

文章

28 人气

关注发私信

友情链接

文江博客

是否可以在不破坏后代＆＃x27的情况下附加到Innerhtml。活动听众？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（7）

关于作者

相关话题

热门标签

推荐作者

櫻之舞

弥枳

m2429

寻找一个思念的角度

野却迷人

我怀念的。

友情链接

是否可以在不破坏后代＆＃x27的情况下附加到Innerhtml。活动听众？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（7）

关于作者

相关话题

热门标签

推荐作者

櫻之舞

弥枳

m2429

寻找一个思念的角度

野却迷人

我怀念的。

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。