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