javascript - 让用户使用 jquery 复制元素的源代码...

Question

我可以理解基本的 javascript 和 jquery，但我很难理解如何让用户查看例如元素的源代码。

如果我在这样的网页上有一个元素

`<p>Hi I'm an element</p>`

每个人都知道它将显示为

Hi I'm an element

但我希望用户在其源代码形式中看到这一点

`<p>Hi I'm an element</p>`

这到底是怎么做到的？？

Answer 1

基本思想是获取元素的 HTML，然后将其以纯文本形式显示在某处。我们可以使用.html()获取 HTML，然后.text()将相同的 HTML 输出为纯文本：

//on the click of a link
​$('a')​.on('click', function () {

    //append a container with the plain-text HTML of an element
    $('body').append($('<div />').text($('form').html()));
});​​

这是演示：http: //jsfiddle.net/YbJfs/

请注意，这不会获得实际的<form>标签，但您可以将表单放在容器中，选择容器，然后使用.html()if 该容器，您也将拥有<form>标签。

此外，如果您想将 HTML 添加到表单输入或文本区域，您可以使用.val()而不是.text().

这是一个演示：http: //jsfiddle.net/YbJfs/1/

Answer 2

您可以使用...

element.outerHTML;

...虽然它在技术上不是“源代码”。是浏览器渲染的HTML，可能会有一些差异。

此外，您需要 Firefox 10 及更低版本的 shim。

function outerHTML(el) {
    return el.outerHMTL || document.createElement('div')
                                   .appendChild(el.cloneNode(true))
                                   .parentNode
                                   .innerHTML;
}

Answer 3

要获取元素的 html，请使用本机 javascripts innerHTML，或者如果您想使用 jQuery，请使用 html() 方法。例子 ...

javascript:

var html = document.getElementById('myOb').innerHTML;

jQuery：

var html = $('#myOb').html();