JavaScript Document.write無法正常工作

Question

我正在嘗試基於Innertext動態填充div。 誰能告訴我為什么這不起作用？

<div id="bs3" class="survey_dashboard_item" onclick="window.open('/building-specifications?bldgaddress=333 Johnson','_self');" style="font-size:40px; border:1px solid #bbb;">
    <script>
        window.onload = function Element(id) {
            if (this.innerText == '333 Johnson') {
                document.write('<div style="float:left; padding-left:10px; padding-top:10px;"><img src="/checkmark.png" title="Project Entered"></div>');
            } else {

            }
        }
    </script>

        ***333 Johnson***</div>

Answer 1

在這種情況下，您不需要，也不應使用document.write() 。
您可以執行以下操作：

<script type="text/javascript">
    function update_bs_3(){
        var el = document.getElementById('bs3');
        if (el.innerHTML.trim() == '333 Johnson') {
            el.innerHTML = '<div style="float:left; padding-left:10px; padding-top:10px;"><img src="/checkmark.png" title="Project Entered"></div>';
        }
    }
</script>

然后將事件處理程序放入您的body元素：

<body onload="update_bs3();">

這是小提琴http://jsfiddle.net/DxjGv/1/

編輯：這是多個div的版本：

HTML：

<div id="bs1" class="survey_dashboard_item" onclick="window.open('/building-specifications?bldgaddress=111 Steve','_self');" style="font-size:40px; border:1px solid #bbb;">
    111 Steve</div>
<div id="bs2" class="survey_dashboard_item" onclick="window.open('/building-specifications?bldgaddress=222 Frankie','_self');" style="font-size:40px; border:1px solid #bbb;">
    222 Frankie</div>
<div id="bs3" class="survey_dashboard_item" onclick="window.open('/building-specifications?bldgaddress=333 Johnson','_self');" style="font-size:40px; border:1px solid #bbb;">
    333 Johnson</div>

JS：

function update_bs_divs(){
    var divs = {
        'bs1': {
            'match': '111 Steve',
            'replacement': '<div>Steve replaced</div>'
        },
        'bs2': {
            'match': '222 George',
            'replacement': '<div>George replaced</div>'
        },
        'bs3': {
            'match': '333 Johnson',
            'replacement': '<div>Johnson replaced</div>'
        }
    };
    for (var id in divs) update_div(id, divs[id].match, divs[id].replacement);
};

function update_div(id, match, replacement){
    var el = document.getElementById(id);
    if (!el || (el.innerHTML.trim() != match)) return;
    else el.innerHTML = replacement;
}

window.onload = update_bs_divs;

將此JS代碼保存在文件中，並將其包含在HTML頭部分中。

小提琴在這里-http: //jsfiddle.net/DxjGv/2/

Answer 2

出於三個原因：

您在文檔完成時運行代碼，然后document.write將替換整個文檔（因為document.open被隱式調用），或者將被忽略，具體取決於瀏覽器。 您已經寫完文檔后就無法對其進行寫操作。
方法（ this ）的上下文不是script標記位於其中的元素，而是事件發生的對象，在此情況下是window對象。
innerText屬性僅在Internet Explorer中有效。

將script標簽放在div之外，否則可能會干擾您的檢查。 您可以使用innerHTML屬性獲取並設置內容：

<div id="bs3" class="survey_dashboard_item" onclick="window.open('/building-specifications?bldgaddress=333 Johnson','_self');" style="font-size:40px; border:1px solid #bbb;">333 Johnson</div>

<script> type="text/javascript"
window.onload = function() {
  var el = document.getElementById('bs3');
  if (el.innerHTML == '333 Johnson') {
    el.innerHTML = '<div style="float:left; padding-left:10px; padding-top:10px;"><img src="/checkmark.png" title="Project Entered"></div>' + el.innerHTML;
  }
};
</script>

Answer 3

Document.write將字符串打印到空白頁中。

您必須使用append/prependChild或innerHTML 。

JavaScript Document.write無法正常工作

問題描述

3 個解決方案

解決方案1
1 已采納 2014-06-01 19:36:19

解決方案2
1 2014-06-01 19:37:25

解決方案3
0 2014-06-01 19:34:16

JavaScript Document.write無法正常工作

問題描述

3 個解決方案

解決方案1 1 已采納 2014-06-01 19:36:19

解決方案2 1 2014-06-01 19:37:25

解決方案3 0 2014-06-01 19:34:16

解決方案1
1 已采納 2014-06-01 19:36:19

解決方案2
1 2014-06-01 19:37:25

解決方案3
0 2014-06-01 19:34:16