Question

我有一个HTMl表格

<form action="" method="post" enctype="multipart/form-data">
    <p>
        Banner Ad Name :<br />
        <input type="text" name="bannerAdName" id="bannerAdName" />
    </p>
    <p>
        Your web page :<br />
        <input type="text" name="bannerAdWeb" id="bannerAdWeb" />
    </p>
    <p>
        Ad image :<br />
        <input type="file" name="bannerAdImage" id="bannerAdImage"/>
    </p>
    <p>
        Title :<br />
        <input type="text" name="bannerAdTitle" id="bannerAdTitle" />
    </p>
    <p>
        Description :<br />
        <textarea name="bannerAdDesc" id="bannerAdDesc" ></textarea>
    </p>
    <div id="button"><input type="button" value="VIEW" onclick="return upload()"/></div>

    <input type="hidden" value="POST" />
</form>

和Javascript

<div id="banAdT">

                                   <script>
                        document.getElementById("bannerAdWeb").onchange = function() {
                        document.getElementById("banAdT").innerHTML = '<a href="'+this.value+'">';
                        }
                    </script>

                    <script>
                        document.getElementById("bannerAdTitle").onchange = function() {
                        var u = this.value;
                        document.getElementById("banAdT").innerHTML += u;
                        document.getElementById("banAdT").innerHTML += '</a>';
                        alert(document.getElementById("banAdT").innerHTML);
                        }
                    </script> 
    </div>

我希望警报显示<a href="someurl">Some Title</a>之类的内容。但相反它显示<a href="someurl"></a>Some Title！请帮忙..我找不到我做错的地方

Answer 1

尝试这样的事情：

            <script>
                document.getElementById("bannerAdWeb").onchange = function() {
                document.getElementById("banAdT").innerHTML = '<a id="bandAdTLink" href="'+this.value+'"></a>';
                }
            </script>

            <script>
                document.getElementById("bannerAdTitle").onchange = function() {
                var u = this.value;
                document.getElementById("bandAdTLink").innerHTML += u;
                alert(document.getElementById("banAdT").innerHTML);
                }
            </script>

解决方案说明：您不应该通过javascript将无效的HTML插入DOM。

Answer 2

您不能将无效的HTML部分放入DOM并期望它们保留。浏览器将出错，例如

document.getElementById("banAdT").innerHTML = '<a href="'+this.value+'">';

浏览器会将错误更正为空A元素。

var u = this.value;
document.getElementById("banAdT").innerHTML += u;

这可能会在A元素之后附加一个u字符。

document.getElementById("banAdT").innerHTML += '</a>';

不知道浏览器会做什么，它实际上是在创建：

<a href="..."></a>u</a>

所以无论发生什么都取决于浏览器。

使用DOM方法，不要乱用innerHTML和字符串操作来处理非平凡的事情。例如。创建A元素，如：

var a = document.createElement('a');
a.href = this.value;

以后

a.appendChild(document.createTextNode('u'));

然后附加一个类似的元素：

document.getElementById("banAdT").apppendChild(a);

Answer 3

有问题的代码是：

document.getElementById("banAdT").innerHTML += u;
document.getElementById("banAdT").innerHTML += '</a>';

那些应该是document.getElementById("bannerAdTitle").value。

字符串连接错误

3 个答案: