請問append可以插入js碼嗎

jquery

ufoer168 2019-01-10 22:17:17 ‧ 4423 瀏覽

分享至

我用js做顯示模板，再用append做流水分頁，
但是網頁會被清空，只剩模版顯示的資料，請問這有解嗎 @@a

<div class="moredata"></div>
<div class="more" onclick="More('inbox', 2);">MORE</div>

<script>
function inbox(msg)
{ document.write('<div class="showbox"><span class="ibox1">'+msg[0]+'<span class="ibox2">'+msg[1]+'</span></span></div>'); }

function More(url, page)
{
	$.ajax({
		url: url,
		type: "POST",
		data: "P="+page,
		success: function(msg)
		{ $(".moredata").append(msg); },
		error: function(){}
	});
}
</script>

後端回饋的資料

<script>inbox(["DATA1","DATE2"]);</script>

wingkawa iT邦新手 3 級 ‧ 2019-01-11 09:16:03 檢舉

不是append的問題，誰告訴你可以用document.write來「添加」新的DOM element了？
先好好看一下jquery的append是怎麼用的：http://api.jquery.com/append/
也看一下 document.write 在做些什麼： https://developer.mozilla.org/en-US/docs/Web/API/Document/write

fillano iT邦超人 1 級 ‧ 2019-01-11 10:29:37 檢舉

參考： https://developer.mozilla.org/en-US/docs/Web/API/Document/write

最上方有一個Note:
as document.write writes to the document stream, calling document.write on a closed (loaded) document automatically calls document.open, which will clear the document.

如果不是明確知道document.write在做什麼事情，就別用他。

柯柯 iT邦新手 2 級 ‧ 2019-01-11 10:42:11 檢舉

你要回傳完資料後執行inbox
那怎不寫
success: function(data){
inbox(data);
}
這樣不就好了....

inbox(msg){
$(".moredata).append('<div class="showbox"><span class="ibox1">'+msg[0]+'<span class="ibox2">'+msg[1]+'</span></span></div>');
}

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

3 個回答

耿直小伙

iT邦新手 1 級 ‧ 2019-01-11 09:27:58

function inbox(msg) {
    retrun '<div class="showbox"><span class="ibox1">'+msg[0]+'<span class="ibox2">'+msg[1]+'</span></span></div>';
}

回應
分享
檢舉

登入發表回應

㊣浩瀚星空㊣

iT邦大神 1 級 ‧ 2019-01-11 09:29:30

怎麼覺得最近是否有人把javascript想的太方便了。

append只是幫你將html的文字給顯示出來。這就像是你把程式碼寫到記事本上的意思一樣。
它會不會跑程式碼??對記事本而言，它只是一段程式文字。不是程式。

所以，用append，就如同我上面說的記事本效應一樣。它可以幫你將那段script加入到你的html沒錯。但對你的html而言，它只是一個文字，一個元素。並無法將它當一個script的程式。
只會將它當一個script的自定元件寫入而已。

ps:我光這個月就碰上3個人問這樣的問題了。(不是在這邊)
也不知道是不是都是你。還是真的有三個人。

回應 2
分享
檢舉

ufoer168 iT邦新手 5 級 ‧ 2019-01-11 09:57:15 檢舉

但是插入後確實是有執行...

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2019-01-11 10:07:24 檢舉

如果可以執行的話。那請問你還有問題嗎??
真是見鬼了。

所以你不覺得是這個問題??是其它你想像不出來的問題嗎?

覺得這不是問題可執行。那我無話可說了。

登入發表回應

淺水員

iT邦大師 6 級 ‧ 2019-01-11 18:10:28

以前我是有用原生 javascript 插入 script
( 搜尋 dynamic insert js )

至於 jQuery 剛剛測試這樣是可以跑的

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>測試</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <input type="button" value="插入script到body" onclick='f1()'>
    <script type="text/javascript">
        function f1()
        {
            $('body').append('<scr'+'ipt>alert("123");</scr'+'ipt>');
        }
    </script>
</body>
</html>

PS. 上面把 script 拆開寫是發現瀏覽器會把字串內的 </script> 當作程式碼結尾 (如果是引用 js 檔的話就不用這樣搞)

不過除非特殊狀況，平常是不需要動態插入 javascript 的
以原發問的內容應該改成讓伺服器回傳 JSON
然後依據 JSON 回傳的內容帶入參數到 inbox 即可：

後端回饋的資料

{'param1':'DATA1','param2':'DATE2'}

然後前端

$.ajax({
    url: url,
    type: "POST",
    dataType:'json',
    data: "P="+page,
    success: function(msg){
        inbox(msg['param1'], msg['param2']);
    },
    error: function(){}
});