Javascript 如何获取现有HTML元素的JS代码？

我想知道是否有任何方法可以使用任何现有方法获取现有HTML元素的JS代码。我试图打印任何DOM元素的代码生成器，因此当用户单击网页的任何HTML元素时，将显示一条消息，其中包含用Javascript创建该元素的源代码

例如，我创建了一个Div：

var div = document.createElement("div");
div.style.border = "1px dotted red";
div.onmouseover=function(){div.style.color = "red"};
div.innerHTML = "I'm the div";

然后我试图获取源代码，但是：

document.body.appendChild(div.innerHTML);

此选项仅写入文本内容：“我是div”。所以我试着：

document.body.appendChild(div.outerHTML);

但是它编写的HTML代码没有onmouseover函数：“我是div”

我真正需要的是显示此代码（或类似的代码）：

你知道我从哪里开始阅读吗？

---

非常感谢，

没有任何内置功能可以满足您的需求，请尝试“aardvark bookmarklet”，它有一个不错的js生成命令。

outerHTML

outerHTML

是一个不错的选择，但有几个限制：

今天（2014年）

使用，哪个使用

换句话说，IDL属性被忽略，只有内容属性被序列化

IDL属性中的事件编码为

div.onmouseover=function(){div.style.color = "red"};
div.addEventListener("mouseover",function() {div.style.backgroundColor="blue";});

div.setAttribute("onmouseover","this.style.color='red'");

了解更多关于

而内容属性的事件编码为

div.onmouseover=function(){div.style.color = "red"};
div.addEventListener("mouseover",function() {div.style.backgroundColor="blue";});

div.setAttribute("onmouseover","this.style.color='red'");

使用content属性，outerHTML如下所示：

<div onmouseover="this.style.color='red'" style="border: 1px dotted red;">
  I'm the div
</div>

事件列表 如果您想以某种方式检索IDL事件，则已从DOM3 spec建议中删除了nice PROFESSED

eventListenerList

属性（请参阅）

如果您想编写firefox插件（类似于code inspector），扩展Element.prototype就可以了（正如我测试的，它在firefox、Chrome和Opera中工作，在IE7中不工作）：

准确地说，您还应该重写

元素.prototype.removeEventListener

，以从自定义EventListenerList中删除事件

现在，您可以像往常一样通过

addEventListener

添加事件：

function handlerA() { alert('a'); }
function handlerB() { alert('b'); }
function handlerC() { alert('c'); }

// attach handlers
div.onclick = handlerC;
div.addEventListener("click",handlerA);
div.addEventListener("click",handlerB);

…并显示侦听器的代码。我将为

onclick

事件执行此操作，在代码中，您应该迭代每个可能的事件。不要忘记最终的

onclick

侦听器（您不能重写

元素.prototype.onclick

，因为它是不可配置的属性）：

---

请参阅并测试。根据插件的需要将这些部分放在一起。

好吧，您可以用一个函数包装

div

元素的创建，然后解析并打印该函数的内容

div = createDiv();
console.log(div.creationString);

下面是一个工作示例（在Chrome、Firefox和Safari中测试）：
也在这里

---

如果您可以控制元素的创建，则可以确保每个元素都是在其单独的功能中创建的。然后一个简单的函数就可以得到函数体

function createElement1() {
    var div = document.createElement("div");
    div.style.border = "1px dotted red";
    div.onmouseover=function(){div.style.color = "red"};
    div.innerHTML = "I'm the div";
}

function getFunctionBody(func) {
    var functionText = func.toString();
    return functionText.slice(functionText.indexOf("{") + 1, functionText.lastIndexOf("}"));
}

---

这里有一个有效的例子

那么HTML文件中的HTML元素呢？那么您想生成生成该元素的JavaScript代码吗？是的，切维，我想生成任何选定dom元素的代码。您无法获取用于生成该元素的代码。你可以制作一些生成代码的东西来创建一个元素，比如你点击的元素，这样可以吗？@gal007我希望我的回答能帮助你获得事件的代码。你的插件还有其他问题吗？

function createDiv() {
    var div = document.createElement("div");
    div.style.border = "1px dotted red";
    div.onmouseover = function() {div.style.color = "red"};
    div.innerHTML = "I'm the div";
    div.creationString = getFunctionContnet(createDiv); // noprint
    return div; // noprint
}

function getFunctionContnet(func) {
    var regExp = /function[^(]*\([^)]*\)[^{]*{(?:\s*\n)?(\s*)([\s\S]*)(?:\n\s*)}/,
        match,
        indention, indentionRE,
        noprintRE = /\/\/.*noprint.*/,
        content = null,
        lines, i;

    match = regExp.exec(func.toString());

    if (match !== null) {
        indention = match[1];
        content = match[2];

        lines = content.split("\n");

        // if first line of the function is indented,
        // remove that indention from all function lines.
        if (typeof indention !== "undefined") {
            indentionRE = new RegExp("^" + indention);
            for (i = 0; i < lines.length; i++) {
                if (indentionRE.test(lines[i])) {
                    lines[i] = lines[i].substr(indention.length);
                }
            }
        }

        // don't print lines with "// noprint"
        for (i = lines.length - 1; i >= 0; i--) {
            if (noprintRE.test(lines[i])) {
                lines.splice(i, 1);
            }
        }

        content = lines.join("\n");
    }

    return content;
}

div = createDiv();
console.log(div.creationString);

function createElement1() {
    var div = document.createElement("div");
    div.style.border = "1px dotted red";
    div.onmouseover=function(){div.style.color = "red"};
    div.innerHTML = "I'm the div";
}

function getFunctionBody(func) {
    var functionText = func.toString();
    return functionText.slice(functionText.indexOf("{") + 1, functionText.lastIndexOf("}"));
}