Question

我正在尝试使用Web服务将新元素传输到文档DOM。

所以我在服务器端准备一个XML，并提供必要的信息来完成这项工作。我的服务器端XML如下：

＆＃13;

<Root>
<Command>Add
<Data><button id="PB" style="width:600px; height:100px;"/></Data>
</Command>
</Root>

＆＃13;

此XML将被以下页面捕获。您将看到XML有一个命令ID＆＃34; Add＆＃34 ;,它应该将数据下面的节点添加到页面。

当代码运行时，将在文档DOM中创建并正确显示该按钮（请参阅代码函数onMessage），但不会呈现该按钮。浏览器调试器告诉我，按钮的宽度和高度似乎是空的。当我在浏览器调试器中编辑属性时，该按钮将在更改后呈现。我在Chrome和IE上得到了这种行为。

我需要一个提示，必须更改才能让它运行。

＆＃13;

<!DOCTYPE html> 
<meta charset="utf-8" /> 

<script language="javascript" type="text/javascript"> 

var wsUri = "ws://localhost:8002/chat"; 
var output;
var websocket;

"use strict";

function init() { 
    output = document.getElementById("output"); 
    testWebSocket(); 
} 

function testWebSocket() { 
    websocket = new WebSocket(wsUri);
    websocket.binaryType = "arraybuffer"; 
    websocket.onopen = function (evt) { onOpen(evt) };
    websocket.onclose = function(evt) { onClose(evt) }; 
    websocket.onmessage = function(evt) { onMessage(evt) }; 
    websocket.onerror = function(evt) { onError(evt) }; 
} 

function onOpen(evt) { 
    writeToScreen("CONNECTED"); 
}

function onClose(evt) { 
    writeToScreen("DISCONNECTED"); 
} 

function onMessage(evt) { 
    var parser, xmlDoc, NodeCommand, but;

    parser = new DOMParser();
    xmlDoc = parser.parseFromString(evt.data, "text/xml");

    NodeCommand = xmlDoc.getElementsByTagName("Command");

    switch (NodeCommand[0].textContent) {
        case "Add":
            output.appendChild(NodeCommand[0].childNodes[1].childNodes[0]);
            break;
    }
} 

function onError(evt) { 
    writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data); 
} 

function doSend(message) { 
    writeToScreen("SENT: " + message); 
    websocket.send(message); 
} 

function writeToScreen(message) { 
    var pre = document.createElement("p"); 
    pre.style.wordWrap = "break-word"; 
    pre.innerHTML = message; 
    output.appendChild(pre); 
} 

window.addEventListener("load", init, false); 

</script> 

<html>

<head>
<title>WebSocket Test</title> 
</head>

<body>
<h2>WebSocket Test</h2> 

<div id="output"></div> 

</body>
</html>

＆＃13;

Answer 1

解决！

这不能以这种（直观的）方式完成。必须在文档上创建元素。

浏览器不呈现附加的子节点

1 个答案: