基本的なjavascriptとjqueryを理解できますが、ユーザーに要素のソースコードを見せる方法を理解するのは難しいです。jqueryを使って要素のソースコードをコピーさせてください
私はこの
`<p>Hi I'm an element</p>`
のようなウェブページ上の要素を持っている場合は、すべてのボディは、それがこの
Hi I'm an element
として表示されます知っているが、私は、ユーザーがそのソースコード形式でこれを見てみたいです
`<p>Hi I'm an element</p>`
これはどのように行われますか？
基本的な考え方は、どこかにプレーンテキストとしてそれを示し、その後、要素の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()));
});
：：私たちは、出力にプレーンテキストと同じHTMLをHTML、その後.text()を取得するために.html()を使用することができ、これは実際の<form>タグを取得していないことhttp://jsfiddle.net/YbJfs/
注意が、フォームをコンテナに配置してコンテナを選択し、そのコンテナに.html()を使用すると、<form>タグも使用できます。
また、フォーム入力またはテキスト領域にHTMLを追加する場合は.text()ではなく.val()を使用できます。
ここはデモです：http://jsfiddle.net/YbJfs/1/
ありがとう、これはトリックを行うかもしれないと思います。 – user1119742
それは技術的には "ソースコード" ではないですが、あなたは... ...
element.outerHTML;
を使用することができます。これはブラウザによってレンダリングされたHTMLですが、いくつかの違いがあります。
また、Firefox 10以降ではシムが必要です。
function outerHTML(el) {
return el.outerHMTL || document.createElement('div')
.appendChild(el.cloneNode(true))
.parentNode
.innerHTML;
}
これはIE8以下で動作しますか？ – user1119742
@ user1119742：トップラインはIE8以下で動作します。 Firefoxのサポートが必要な場合は、代わりに2番目のコードブロックを使用します。 '.outerHTML'プロパティを最初に試行し、それが機能しない場合は修正を実行します。 –
要素のhtmlを取得するには、ネイティブのjavascriptのinnerHTMLを使用するか、jQueryを使用する場合はhtml（）メソッドを使用します。例...
のjavascript：
var html = document.getElementById('myOb').innerHTML;
のjQuery：
var html = $('#myOb').html();
あなたのタイトルは写真とは逆のようです。どのような画像が表示されるかは、誰かがソースコードを書いてから、そのソースコードがどのように見えるかをプレビューできるようにすることです。 –
ボタンをクリックしたときにHTMLからフォームを生成しようとしています –
そのソースをクリップボードに入れる必要がありますか？ Smthのように "このボタンをクリックして、ソースコードがあなたのクリップボードにあります"。はいの場合は、ブラウザの中にはJSのように直接（Firefoxのように）クリップボードを使用できないものがあることを伝える必要があります。あなたはそれがクロスブラウザスクリプトである必要がある場合、これのためにいくつかの小さなフラッシュアプリを使用する必要があります。 –