iT邦幫忙

1

如何替換JS的 document.write()

大家好,
最近剛看到避免使用document.write()這篇文章

文中提到:不建議使用document.write(),
但如果真的有需求是要動態render從server傳回的html進現有DOM,
有什麼比較好的替換方案呢?

看更多先前的討論...收起先前的討論...
dragonH iT邦大師 1 級 ‧ 2019-09-18 13:35:01 檢舉
append appendChild ?
恩...這兩個API看起來都只能insert一個Node物件,如果得到一段像是```<div><img src="https://picsum.photos/200/300" /></div>```這樣的HTML,就需要有指令能把HTML parse 成Node物件了,請問大大有知道什麼指令可以做到嗎
froce iT邦大師 4 級 ‧ 2019-09-18 13:43:17 檢舉
https://ithelp.ithome.com.tw/articles/10095309
聆聽佛祖的教誨。
好的(戴墨鏡
dragonH iT邦大師 1 級 ‧ 2019-09-18 13:50:43 檢舉
jquery 包裝的 append 好像可以用 html code

有興趣可以去看他的 source code

有點忘了

multi node 的話

innerHTML 也可以

適不適合就要請佛祖開示了XD
ccutmis iT邦高手 9 級 ‧ 2019-09-18 13:56:26 檢舉
娘子快跟牛魔王出來看佛祖...
阿阿 謝謝你們 剛剛研究了一下 感覺可以用 document.currentScript.insertAdjacentHTML() 來替換~
https://jsbin.com/rutocejuqi/1/edit?html,console,output
froce iT邦大師 4 級 ‧ 2019-09-18 14:01:36 檢舉
innerHTML 會把那個node重寫,有時候不符合只要append的狀況。
3
froce
iT邦大師 4 級 ‧ 2019-09-18 13:56:33
最佳解答

用Range().createContextualFragment()

let frag = document.createRange().createContextualFragment('<div><img src="https://picsum.photos/200/300" /></div>')

let updated = document.querySelector("#be_appended")

updated.appendChild(frag)

或DOMParser().parseFromString()

let frag = new DOMParser().parseFromString('<div><img src="https://picsum.photos/200/300" /></div>', "text/html")

https://developer.mozilla.org/en-US/docs/Web/API/Range/createContextualFragment
https://developer.mozilla.org/zh-TW/docs/Web/API/DOMParser

謝謝 DOMParser 就是我需要的XD

淺水員 iT邦新手 2 級 ‧ 2019-09-18 14:23:38 檢舉

倒是沒想過用 DOMParser 當作 frg 來插入
以前都拿來解析爬到的東西重新渲染...

看在你有創意 最佳解答就給你了

2
浩瀚星空
iT邦大師 1 級 ‧ 2019-09-18 13:51:32

document.write的優點,也是其缺點。

優點就是它等同javascript的echo或是print的用法。
也就是它可以擔認其輸出的作用存在。簡單明白的處理。
但這也正是它的缺點。

其無法指定位置,無法將其做為一個dom來操作應用。
雖然輸出的資料,還可以用後置方式來處理為一個d端點來應用。
但這也就造成了document.write的麻煩性。也就是它是屬於無容器的對待。
(雖然是說無容器,但其實它還是屬於document容器的一種就是了)

簡單來說,如果今天只是擔存的輸出結果或畫面。無需做任何處理及操作的情況下。
使用document.write是一個很好的選擇沒錯。
但一般來說,最好還是用innerHTML來取代document.write會比較好。

畢竟document.write還是有其隱憂。

是的 我也想找辦法替代他 幸好剛剛找到 currentScript 可以用來指向目前執行的 node
只是要注意一下相容性 就是了

0
小魚
iT邦大師 1 級 ‧ 2019-09-18 15:20:58

我已經很多年沒用document.write了,
其實你有需求的時候多google就會有答案了,
我記得jQuery的append也是可以塞html code下去的.

看更多先前的回應...收起先前的回應...
froce iT邦大師 4 級 ‧ 2019-09-18 15:27:19 檢舉

其實我根本就忘了這個函式...XD

小魚 iT邦大師 1 級 ‧ 2019-09-18 16:22:21 檢舉

froce
所以你現在都是用框架嗎?

froce iT邦大師 4 級 ‧ 2019-09-19 08:24:29 檢舉

JQ比較多,目前使用Django比較偏向中型的全端開發框架,用vue感覺沒省什麼事。
不過有在考慮轉換就是了。

我很早就沒在用 document.write 了。
之前我家工程師使用還被我唸了一下。

現在都是用jq來處理了。我也是想往vue來轉換開發中

小魚 iT邦大師 1 級 ‧ 2019-09-19 09:48:52 檢舉

我 Vue 跟 React 都有寫,
我覺得用框架就一定要前後端分離,
就算是同一個人寫的也是一樣.
之前自己用jQ寫的網站,
後來用React重寫一遍,
我是覺得優點是在可以不同人開發,
如果前後端都自己來倒不一定要用框架.

froce iT邦大師 4 級 ‧ 2019-09-19 11:27:46 檢舉

其實也不一定啦,vue拿來當script引入其實也不錯,因為只要維護data而已。

問題是我得兼顧ie,而拿vue當函式庫引入的方式不能用ES6以上寫,要不然就得透過轉譯。
這個時候拿vue當script引用就沒啥競爭力了,不如JQ好用。

我要發表回答

立即登入回答