简体   繁体   English

在元素插入DOM之前更改其HTML

[英]Changing element's HTML before it's inserted in the DOM

Is it possible to change an element's inner HTML before it is inserted in the DOM? 在将元素插入DOM之前,是否可以更改其内部HTML? I already tried doing this with MutationObserver but the problem is that you can see the element's HTML visually changing, is there a way to do this before DOM insertion altogether? 我已经尝试过使用MutationObserver进行此操作,但是问题是您可以看到元素的HTML发生了视觉变化,是否可以在完全插入DOM之前执行此操作?

var observer = new MutationObserver(function(mutations) {

    mutations.forEach(function(mutation) {
        mutation.addedNodes[0].innerHTML = "....";
    });    
});

// Notify me of everything!
var observerConfig = {
    attributes: true, 
    childList: true, 
    characterData: true 
};

var targetNode = document.querySelector("ul#myElement");
observer.observe(targetNode, observerConfig);

您可以尝试将整个正文显示为CSS display:none,更改所需的内容,然后再将其放回display:block

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 IE 是否需要在知道它的属性之前将元素插入到 DOM 中? - Does IE need an element to be inserted into the DOM before knowing it's properties? HTML / CSS / JS:在将元素附加到DOM树之前是否可以找到元素的大小? - HTML / CSS/ JS: Is it possible to find the element's size before appending it to the DOM tree? 在将jQuery创建的元素插入DOM树之前,是否可以获取它的HTML? - Is it possible to get the HTML of a jQuery created element before it has been inserted into the DOM Tree? 将事件处理程序绑定到由jQuery .html()函数插入的元素上 - Bind an event handler on a element who's inserted by the jQuery .html() function 加载后无需jQuery即可更改dom元素的位置 - Changing a dom element's position after load without jquery jQuery:在元素的HTML之前追加项目 - JQuery: append item before element's HTML 如何使用JavaScript获取DOM元素之前的内容? - How to get a DOM element's ::before content with JavaScript? 用ajax更改slick-carousel的html后,DOM不更新 - DOM not updating after changing slick-carousel's html with ajax backdraft 组件是否对插入它的 dom 元素有任何可见性? - Does a backdraft component have any visibility into the dom element where it's being inserted? 如何引用<HTML>元素的相应DOM对象? - How can I reference the <HTML> element's corresponding DOM object?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM