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）不是脚本标记所在的元素，它是事件发生的对象，在本例中是window对象。
innerText属性仅适用于Internet Explorer。

将脚本标记放在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 个答案: