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()如果该容器，您将拥有<form>标记。

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

以下是演示：http://jsfiddle.net/YbJfs/1/

Answer 2

你可以使用......

element.outerHTML;

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

此外，你需要一个适用于Firefox 10及更低版本的垫片。

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();

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

3 个答案: