Лепшы спосаб для стварэння дынамічнага кантэнту з дапамогай JavaScript?

Ці мае значэнне, калі я ствараю элемент і ўсталяваць атрыбуты элемента праграмна як у фрагменце 1 вершах выпісваючы innerHTML, як ў фрагменце кода 2? Што аб выкарыстанні бібліятэкі шаблонаў, як гэта прапануецца ў адным з адказаў?

<�Моцны> фрагмент кода 1

var link_element,
    image_element;

// create image element

image_element = $A.createElement('img');
image_element.className = "bookmark_image";
image_element.name = "bo_im";
image_element.src = bookmark_object.favicon;

// create link element

link_element = $A.createElement('a');
link_element.innerHTML = bookmark_object.title;
link_element.href = bookmark_object.url;
link_element.name = "bookmark_link";
link_element.className = "bookmark_link";
link_element.target = "_blank";

// append now

<�Моцны> фрагмент кода 2

'' +
'' + val.title + '' +

// set to innerHTML now
4
Калі вы знайшлі другі метад «значна прасцей» і «хацелі б выкарыстоўваць», то чаму б проста не пайсці з другім спосабам? Гэта карацей, гэта больш інтуітыўным, і вы хочаце зрабіць гэта! Калі ёсць пэўныя сумневы, у вас ёсць пра другім спосабе, згадваючы іх бы зрабіць гэта больш карысным пытаннем.
дададзена аўтар ASGM, крыніца
Вы можаце напісаць фрагмент 1 нашмат акуратней і карацей. Напрыклад, усталёўваючы атрыбуты могуць (павінны) быць зроблены з (глабальнай) дапаможнай функцыяй, якія можна ўсталяваць кучу у цыкле. <�Код> helpers.setAttr ({імя: 'Foo', імя класа: 'бар', ЦСІ: someSrcVar}) . jQuery мае гэты варыянт, пабудаваны ў, а й <�Код> $ ( '', {ЦСІ: './'})
дададзена аўтар René, крыніца
Вы можаце напісаць фрагмент 1 нашмат акуратней і карацей. Напрыклад, усталёўваючы атрыбуты могуць (павінны) быць зроблены з (глабальнай) дапаможнай функцыяй, якія можна ўсталяваць кучу у цыкле. <�Код> helpers.setAttr ({імя: 'Foo', імя класа: 'бар', ЦСІ: someSrcVar}) . jQuery мае гэты варыянт, пабудаваны ў, а й <�Код> $ ( '', {ЦСІ: './'})
дададзена аўтар René, крыніца
Вы можаце напісаць фрагмент 1 нашмат акуратней і карацей. Напрыклад, усталёўваючы атрыбуты могуць (павінны) быць зроблены з (глабальнай) дапаможнай функцыяй, якія можна ўсталяваць кучу у цыкле. <�Код> helpers.setAttr ({імя: 'Foo', імя класа: 'бар', ЦСІ: someSrcVar}) . jQuery мае гэты варыянт, пабудаваны ў, а й <�Код> $ ( '', {ЦСІ: './'})
дададзена аўтар René, крыніца

8 адказы

Вельмі добрае рашэнне (ИМО) да гэтай праблемы заключаецца ў выкарыстанні нейкага бібліятэка шаблонаў. Адзін папулярны варыянт будзе Вусы , які мае бібліятэкі для многіх моў уключаючы JavaScript .

The template approach consists of writing your HTML with placeholders in, e.g., a <script> tag:

<!-- very simple example -->
<script id="bookmark-template" type="text/html">
    
    
        {{title}}
    
</script>

Затым, калі прыходзіць час для візуалізацыі дынамічнага змесціва, можна выкарыстоўваць шаблон і падаць дадзеныя для запаўнення яго адпаведным чынам:

var template = document.getElementById("bookmark-template").textContent;
var html = Mustache.render(template, bookmark_object);

Каб праілюстраваць гэта больш ясна, вось jsFiddle дэманструе гэты падыход (у тым ліку на карысьць ўцёкаў).

Ёсць па меншай меры некалькі пераваг рабіць рэчы такім чынам:

  1. Выкарыстанне шаблону дазваляе на самой справе напісаць HTML-з водступам, фарматаванне і г.д., каб зрабіць яго максімальна чытаным, наколькі гэта магчыма, а не проста «амаль проста скапіяваць яго», як вы кажаце, у ваша пытанне. Вам не трэба пісаць адну вялікую радок, або канкатэнацыі кучу радкоў з + або выкарыстоўвайце + наогул па гэтым пытанні.
  2. Добрая бібліятэка шаблонаў будзе правільна бегчы ваш HTML для вас.

Для мяне гэтыя перавагі разам досыць. Вы можаце адчуваць сябе па-рознаму.

3
дададзена
@ Pure_code.mom: Вы можаце выкарыстоўваць DIV , але тады ён будзе адлюстроўвацца. Вы б тады хочаце дадаць стыль: «дысплей: не;" (ці выкарыстоўваць некаторы эквівалентны падыход), каб забяспечыць шаблон сам не адлюстроўваюцца на старонцы. Выкарыстанне сцэнар тэг гэта проста ўмоўнасць. Звярніце ўвагу на тое, што тып атрыбут усталяваны ў становішча «тэкст/html» у адрозненне ад «тэкст/JavaScript».
дададзена аўтар Dan Tao, крыніца
@ Pure_code.mom: Калі вы занепакоеныя тым, што <�скрыпт> тэг абавязкова будзе «выкананы» рухавічком JavaScript, не будзе. Ўстаноўка тыпу атрыбуту «тэкст/html» прадухіляе выкананне. Вы можаце ўбачыць для сябе тут: jsfiddle.net/APBWL
дададзена аўтар Dan Tao, крыніца
@ Pure_code.mom: Так, я думаю, што гэта на самай справе кропка Рэнэ; гэта значыць, калі змясціць тэкст ўнутры <div> тэг, ён разабраны <�я> у HTML і ўстаўляецца ў DOM (што азначае малюнка загружаюцца, напрыклад). Выкарыстанне <script> Тэг разглядае ўтрыманне ў якасці зыходнага тэксту. Іншы (праўда, дзіўна) варыянт можа выкарыстоўваць
дададзена аўтар Dan Tao, крыніца
Я дадаў некалькі пераваг для адказу, нароўні з jsFiddle паказвае, а не казаць. Я не ведаю дакладна, што вы маеце на ўвазе пад «напісання HTML у JavaScript» (для мяне, ваш другі падыход выпісваючы ў HTML радок у JavaScript гучыць падобнае); але я не думаю, што я б ахарактарызаваць яго такім чынам. Паглядзіце на jsFiddle і дайце мне ведаць, калі вам не падабаецца гэты падыход, і чаму. Мне было б цікава ведаць.
дададзена аўтар Dan Tao, крыніца
Выкарыстанне тэга сцэнара не проста ўмоўнасць. Перавага выкарыстання сцэнарыя тэгаў з шаблонам тыпу або аналагічным, каб пераканацца, што нічога з атрыбутам SRC (малюнкі, IFrames) не будзе загружацца, калі яны яшчэ не патрабуецца. Існуе праект на новы тэг шаблону, які будзе таксама зрабіць гэта AFAIK. Але, не мае зваротнай сумяшчальнасці ... тэг скрыпт.
дададзена аўтар René, крыніца
Як правіла, не змешваюцца. То і не давайце разметкі (HTML) у JavaScript, таму што гэта зробіць ваш код цяжэй падтрымліваць.
дададзена аўтар René, крыніца
@Rene - гэта не фактычнае ўтрыманне тэксту з дапамогай тэгаў у разабраны па-рознаму, а?
дададзена аўтар user1637281, крыніца

Вельмі добрае рашэнне (ИМО) да гэтай праблемы заключаецца ў выкарыстанні нейкага бібліятэка шаблонаў. Адзін папулярны варыянт будзе Вусы , які мае бібліятэкі для многіх моў уключаючы JavaScript .

The template approach consists of writing your HTML with placeholders in, e.g., a <script> tag:

<!-- very simple example -->
<script id="bookmark-template" type="text/html">
    
    
        {{title}}
    
</script>

Затым, калі прыходзіць час для візуалізацыі дынамічнага змесціва, можна выкарыстоўваць шаблон і падаць дадзеныя для запаўнення яго адпаведным чынам:

var template = document.getElementById("bookmark-template").textContent;
var html = Mustache.render(template, bookmark_object);

Каб праілюстраваць гэта больш ясна, вось jsFiddle дэманструе гэты падыход (у тым ліку на карысьць ўцёкаў).

Ёсць па меншай меры некалькі пераваг рабіць рэчы такім чынам:

  1. Выкарыстанне шаблону дазваляе на самой справе напісаць HTML-з водступам, фарматаванне і г.д., каб зрабіць яго максімальна чытаным, наколькі гэта магчыма, а не проста «амаль проста скапіяваць яго», як вы кажаце, у ваша пытанне. Вам не трэба пісаць адну вялікую радок, або канкатэнацыі кучу радкоў з + або выкарыстоўвайце + наогул па гэтым пытанні.
  2. Добрая бібліятэка шаблонаў будзе правільна бегчы ваш HTML для вас.

Для мяне гэтыя перавагі разам досыць. Вы можаце адчуваць сябе па-рознаму.

3
дададзена
@ Pure_code.mom: Калі вы занепакоеныя тым, што <�скрыпт> тэг абавязкова будзе «выкананы» рухавічком JavaScript, не будзе. Ўстаноўка тыпу атрыбуту «тэкст/html» прадухіляе выкананне. Вы можаце ўбачыць для сябе тут: jsfiddle.net/APBWL
дададзена аўтар Dan Tao, крыніца
@ Pure_code.mom: Так, я думаю, што гэта на самай справе кропка Рэнэ; гэта значыць, калі змясціць тэкст ўнутры <div> тэг, ён разабраны <�я> у HTML і ўстаўляецца ў DOM (што азначае малюнка загружаюцца, напрыклад). Выкарыстанне <script> Тэг разглядае ўтрыманне ў якасці зыходнага тэксту. Іншы (праўда, дзіўна) варыянт можа выкарыстоўваць
дададзена аўтар Dan Tao, крыніца
@ Pure_code.mom: Вы можаце выкарыстоўваць DIV , але тады ён будзе адлюстроўвацца. Вы б тады хочаце дадаць стыль: «дысплей: не;" (ці выкарыстоўваць некаторы эквівалентны падыход), каб забяспечыць шаблон сам не адлюстроўваюцца на старонцы. Выкарыстанне сцэнар тэг гэта проста ўмоўнасць. Звярніце ўвагу на тое, што тып атрыбут усталяваны ў становішча «тэкст/html» у адрозненне ад «тэкст/JavaScript».
дададзена аўтар Dan Tao, крыніца
Я дадаў некалькі пераваг для адказу, нароўні з jsFiddle паказвае, а не казаць. Я не ведаю дакладна, што вы маеце на ўвазе пад «напісання HTML у JavaScript» (для мяне, ваш другі падыход выпісваючы ў HTML радок у JavaScript гучыць падобнае); але я не думаю, што я б ахарактарызаваць яго такім чынам. Паглядзіце на jsFiddle і дайце мне ведаць, калі вам не падабаецца гэты падыход, і чаму. Мне было б цікава ведаць.
дададзена аўтар Dan Tao, крыніца
Выкарыстанне тэга сцэнара не проста ўмоўнасць. Перавага выкарыстання сцэнарыя тэгаў з шаблонам тыпу або аналагічным, каб пераканацца, што нічога з атрыбутам SRC (малюнкі, IFrames) не будзе загружацца, калі яны яшчэ не патрабуецца. Існуе праект на новы тэг шаблону, які будзе таксама зрабіць гэта AFAIK. Але, не мае зваротнай сумяшчальнасці ... тэг скрыпт.
дададзена аўтар René, крыніца
Як правіла, не змешваюцца. То і не давайце разметкі (HTML) у JavaScript, таму што гэта зробіць ваш код цяжэй падтрымліваць.
дададзена аўтар René, крыніца
@Rene - гэта не фактычнае ўтрыманне тэксту з дапамогай тэгаў у разабраны па-рознаму, а?
дададзена аўтар user1637281, крыніца

Вельмі добрае рашэнне (ИМО) да гэтай праблемы заключаецца ў выкарыстанні нейкага бібліятэка шаблонаў. Адзін папулярны варыянт будзе Вусы , які мае бібліятэкі для многіх моў уключаючы JavaScript .

The template approach consists of writing your HTML with placeholders in, e.g., a <script> tag:

<!-- very simple example -->
<script id="bookmark-template" type="text/html">
    
    
        {{title}}
    
</script>

Затым, калі прыходзіць час для візуалізацыі дынамічнага змесціва, можна выкарыстоўваць шаблон і падаць дадзеныя для запаўнення яго адпаведным чынам:

var template = document.getElementById("bookmark-template").textContent;
var html = Mustache.render(template, bookmark_object);

Каб праілюстраваць гэта больш ясна, вось jsFiddle дэманструе гэты падыход (у тым ліку на карысьць ўцёкаў).

Ёсць па меншай меры некалькі пераваг рабіць рэчы такім чынам:

  1. Выкарыстанне шаблону дазваляе на самой справе напісаць HTML-з водступам, фарматаванне і г.д., каб зрабіць яго максімальна чытаным, наколькі гэта магчыма, а не проста «амаль проста скапіяваць яго», як вы кажаце, у ваша пытанне. Вам не трэба пісаць адну вялікую радок, або канкатэнацыі кучу радкоў з + або выкарыстоўвайце + наогул па гэтым пытанні.
  2. Добрая бібліятэка шаблонаў будзе правільна бегчы ваш HTML для вас.

Для мяне гэтыя перавагі разам досыць. Вы можаце адчуваць сябе па-рознаму.

3
дададзена
@ Pure_code.mom: Калі вы занепакоеныя тым, што <�скрыпт> тэг абавязкова будзе «выкананы» рухавічком JavaScript, не будзе. Ўстаноўка тыпу атрыбуту «тэкст/html» прадухіляе выкананне. Вы можаце ўбачыць для сябе тут: jsfiddle.net/APBWL
дададзена аўтар Dan Tao, крыніца
@ Pure_code.mom: Так, я думаю, што гэта на самай справе кропка Рэнэ; гэта значыць, калі змясціць тэкст ўнутры <div> тэг, ён разабраны <�я> у HTML і ўстаўляецца ў DOM (што азначае малюнка загружаюцца, напрыклад). Выкарыстанне <script> Тэг разглядае ўтрыманне ў якасці зыходнага тэксту. Іншы (праўда, дзіўна) варыянт можа выкарыстоўваць
дададзена аўтар Dan Tao, крыніца
@ Pure_code.mom: Вы можаце выкарыстоўваць DIV , але тады ён будзе адлюстроўвацца. Вы б тады хочаце дадаць стыль: «дысплей: не;" (ці выкарыстоўваць некаторы эквівалентны падыход), каб забяспечыць шаблон сам не адлюстроўваюцца на старонцы. Выкарыстанне сцэнар тэг гэта проста ўмоўнасць. Звярніце ўвагу на тое, што тып атрыбут усталяваны ў становішча «тэкст/html» у адрозненне ад «тэкст/JavaScript».
дададзена аўтар Dan Tao, крыніца
Я дадаў некалькі пераваг для адказу, нароўні з jsFiddle паказвае, а не казаць. Я не ведаю дакладна, што вы маеце на ўвазе пад «напісання HTML у JavaScript» (для мяне, ваш другі падыход выпісваючы ў HTML радок у JavaScript гучыць падобнае); але я не думаю, што я б ахарактарызаваць яго такім чынам. Паглядзіце на jsFiddle і дайце мне ведаць, калі вам не падабаецца гэты падыход, і чаму. Мне было б цікава ведаць.
дададзена аўтар Dan Tao, крыніца
Выкарыстанне тэга сцэнара не проста ўмоўнасць. Перавага выкарыстання сцэнарыя тэгаў з шаблонам тыпу або аналагічным, каб пераканацца, што нічога з атрыбутам SRC (малюнкі, IFrames) не будзе загружацца, калі яны яшчэ не патрабуецца. Існуе праект на новы тэг шаблону, які будзе таксама зрабіць гэта AFAIK. Але, не мае зваротнай сумяшчальнасці ... тэг скрыпт.
дададзена аўтар René, крыніца
Як правіла, не змешваюцца. То і не давайце разметкі (HTML) у JavaScript, таму што гэта зробіць ваш код цяжэй падтрымліваць.
дададзена аўтар René, крыніца
@Rene - гэта не фактычнае ўтрыманне тэксту з дапамогай тэгаў у разабраны па-рознаму, а?
дададзена аўтар user1637281, крыніца

Вельмі добрае рашэнне (ИМО) да гэтай праблемы заключаецца ў выкарыстанні нейкага бібліятэка шаблонаў. Адзін папулярны варыянт будзе Вусы , які мае бібліятэкі для многіх моў уключаючы JavaScript .

The template approach consists of writing your HTML with placeholders in, e.g., a <script> tag:

<!-- very simple example -->
<script id="bookmark-template" type="text/html">
    
    
        {{title}}
    
</script>

Затым, калі прыходзіць час для візуалізацыі дынамічнага змесціва, можна выкарыстоўваць шаблон і падаць дадзеныя для запаўнення яго адпаведным чынам:

var template = document.getElementById("bookmark-template").textContent;
var html = Mustache.render(template, bookmark_object);

Каб праілюстраваць гэта больш ясна, вось jsFiddle дэманструе гэты падыход (у тым ліку на карысьць ўцёкаў).

Ёсць па меншай меры некалькі пераваг рабіць рэчы такім чынам:

  1. Выкарыстанне шаблону дазваляе на самой справе напісаць HTML-з водступам, фарматаванне і г.д., каб зрабіць яго максімальна чытаным, наколькі гэта магчыма, а не проста «амаль проста скапіяваць яго», як вы кажаце, у ваша пытанне. Вам не трэба пісаць адну вялікую радок, або канкатэнацыі кучу радкоў з + або выкарыстоўвайце + наогул па гэтым пытанні.
  2. Добрая бібліятэка шаблонаў будзе правільна бегчы ваш HTML для вас.

Для мяне гэтыя перавагі разам досыць. Вы можаце адчуваць сябе па-рознаму.

3
дададзена
@ Pure_code.mom: Калі вы занепакоеныя тым, што <�скрыпт> тэг абавязкова будзе «выкананы» рухавічком JavaScript, не будзе. Ўстаноўка тыпу атрыбуту «тэкст/html» прадухіляе выкананне. Вы можаце ўбачыць для сябе тут: jsfiddle.net/APBWL
дададзена аўтар Dan Tao, крыніца
@ Pure_code.mom: Так, я думаю, што гэта на самай справе кропка Рэнэ; гэта значыць, калі змясціць тэкст ўнутры <div> тэг, ён разабраны <�я> у HTML і ўстаўляецца ў DOM (што азначае малюнка загружаюцца, напрыклад). Выкарыстанне <script> Тэг разглядае ўтрыманне ў якасці зыходнага тэксту. Іншы (праўда, дзіўна) варыянт можа выкарыстоўваць
дададзена аўтар Dan Tao, крыніца
@ Pure_code.mom: Вы можаце выкарыстоўваць DIV , але тады ён будзе адлюстроўвацца. Вы б тады хочаце дадаць стыль: «дысплей: не;" (ці выкарыстоўваць некаторы эквівалентны падыход), каб забяспечыць шаблон сам не адлюстроўваюцца на старонцы. Выкарыстанне сцэнар тэг гэта проста ўмоўнасць. Звярніце ўвагу на тое, што тып атрыбут усталяваны ў становішча «тэкст/html» у адрозненне ад «тэкст/JavaScript».
дададзена аўтар Dan Tao, крыніца
Я дадаў некалькі пераваг для адказу, нароўні з jsFiddle паказвае, а не казаць. Я не ведаю дакладна, што вы маеце на ўвазе пад «напісання HTML у JavaScript» (для мяне, ваш другі падыход выпісваючы ў HTML радок у JavaScript гучыць падобнае); але я не думаю, што я б ахарактарызаваць яго такім чынам. Паглядзіце на jsFiddle і дайце мне ведаць, калі вам не падабаецца гэты падыход, і чаму. Мне было б цікава ведаць.
дададзена аўтар Dan Tao, крыніца
Выкарыстанне тэга сцэнара не проста ўмоўнасць. Перавага выкарыстання сцэнарыя тэгаў з шаблонам тыпу або аналагічным, каб пераканацца, што нічога з атрыбутам SRC (малюнкі, IFrames) не будзе загружацца, калі яны яшчэ не патрабуецца. Існуе праект на новы тэг шаблону, які будзе таксама зрабіць гэта AFAIK. Але, не мае зваротнай сумяшчальнасці ... тэг скрыпт.
дададзена аўтар René, крыніца
Як правіла, не змешваюцца. То і не давайце разметкі (HTML) у JavaScript, таму што гэта зробіць ваш код цяжэй падтрымліваць.
дададзена аўтар René, крыніца
@Rene - гэта не фактычнае ўтрыманне тэксту з дапамогай тэгаў у разабраны па-рознаму, а?
дададзена аўтар user1637281, крыніца

snippet 2 drops any dynamically added events, see the code jsFiddle:

<div id="source">
  <div>item with click event</div>
</div>

<div id="target">
</div>

<script>
  var source = document.getElementById("source");
  var target = document.getElementById("target");
  source.children[0].onclick = alert.bind(null,"test");
  target.innerHTML = source.innerHTML;//onclick event is not copied
</script>

Калі вы не выкарыстоўваеце дынамічныя падзеі на створаных элементаў, застацца з <�моцны> фрагмент кода 1 : з-за «асаблівасць», згаданыя вышэй, здаецца, хутчэй .

1
дададзена
@ Pure_code.mom вы мелі рацыю: я прывык працаваць з дынамічна ствараюцца падзеямі і скокнуў у хуткі выснову, што innerHTML ня разабраныя наогул. Толькі тыя падзеі, адкідаюцца, убачыць мой абноўлены адказ. І дзякуй за прасьвятліць мяне!
дададзена аўтар Jan Turoň, крыніца
Гэта проста не адпавядае рэчаіснасці. Проста праверыў гэта, і я магу выцягнуць элемент проста выдатна пры выкарыстанні фрагмента кода 2.
дададзена аўтар user1637281, крыніца

snippet 2 drops any dynamically added events, see the code jsFiddle:

<div id="source">
  <div>item with click event</div>
</div>

<div id="target">
</div>

<script>
  var source = document.getElementById("source");
  var target = document.getElementById("target");
  source.children[0].onclick = alert.bind(null,"test");
  target.innerHTML = source.innerHTML;//onclick event is not copied
</script>

Калі вы не выкарыстоўваеце дынамічныя падзеі на створаных элементаў, застацца з <�моцны> фрагмент кода 1 : з-за «асаблівасць», згаданыя вышэй, здаецца, хутчэй .

1
дададзена
@ Pure_code.mom вы мелі рацыю: я прывык працаваць з дынамічна ствараюцца падзеямі і скокнуў у хуткі выснову, што innerHTML ня разабраныя наогул. Толькі тыя падзеі, адкідаюцца, убачыць мой абноўлены адказ. І дзякуй за прасьвятліць мяне!
дададзена аўтар Jan Turoň, крыніца
Гэта проста не адпавядае рэчаіснасці. Проста праверыў гэта, і я магу выцягнуць элемент проста выдатна пры выкарыстанні фрагмента кода 2.
дададзена аўтар user1637281, крыніца

snippet 2 drops any dynamically added events, see the code jsFiddle:

<div id="source">
  <div>item with click event</div>
</div>

<div id="target">
</div>

<script>
  var source = document.getElementById("source");
  var target = document.getElementById("target");
  source.children[0].onclick = alert.bind(null,"test");
  target.innerHTML = source.innerHTML;//onclick event is not copied
</script>

Калі вы не выкарыстоўваеце дынамічныя падзеі на створаных элементаў, застацца з <�моцны> фрагмент кода 1 : з-за «асаблівасць», згаданыя вышэй, здаецца, хутчэй .

1
дададзена
@ Pure_code.mom вы мелі рацыю: я прывык працаваць з дынамічна ствараюцца падзеямі і скокнуў у хуткі выснову, што innerHTML ня разабраныя наогул. Толькі тыя падзеі, адкідаюцца, убачыць мой абноўлены адказ. І дзякуй за прасьвятліць мяне!
дададзена аўтар Jan Turoň, крыніца
Гэта проста не адпавядае рэчаіснасці. Проста праверыў гэта, і я магу выцягнуць элемент проста выдатна пры выкарыстанні фрагмента кода 2.
дададзена аўтар user1637281, крыніца

snippet 2 drops any dynamically added events, see the code jsFiddle:

<div id="source">
  <div>item with click event</div>
</div>

<div id="target">
</div>

<script>
  var source = document.getElementById("source");
  var target = document.getElementById("target");
  source.children[0].onclick = alert.bind(null,"test");
  target.innerHTML = source.innerHTML;//onclick event is not copied
</script>

Калі вы не выкарыстоўваеце дынамічныя падзеі на створаных элементаў, застацца з <�моцны> фрагмент кода 1 : з-за «асаблівасць», згаданыя вышэй, здаецца, хутчэй .

1
дададзена
@ Pure_code.mom вы мелі рацыю: я прывык працаваць з дынамічна ствараюцца падзеямі і скокнуў у хуткі выснову, што innerHTML ня разабраныя наогул. Толькі тыя падзеі, адкідаюцца, убачыць мой абноўлены адказ. І дзякуй за прасьвятліць мяне!
дададзена аўтар Jan Turoň, крыніца
Гэта проста не адпавядае рэчаіснасці. Проста праверыў гэта, і я магу выцягнуць элемент проста выдатна пры выкарыстанні фрагмента кода 2.
дададзена аўтар user1637281, крыніца