1

我正在尝试编写一个小型 js 脚本，让用户输入一串文本，然后将其包装在一些 html 中输出到页面。

我知道如何用 php 做到这一点，但是对于这样一个简单的操作来说似乎有点过头了，而且我总是热衷于学习新的东西。

我在玩，document.myform.submit();但我不确定如何将表单值提交给变量，然后使用document.write();

有什么想法我会怎么做？

我在这里创建了一个问题的 jsfiddle - http://jsfiddle.net/pudle/axcLz/

4

1 回答 1

1

有很多方法可以做到这一点。这是显示其中之一的代码：

document.getElementById("myform").onsubmit = function (event) {
    var link = document.getElementById("mylink");
    var textField = document.getElementById("text");
    link.href = textField.value;
    textNode = document.createTextNode(textField.value);
    if (link.hasChildNodes()) {
        link.removeChild(link.lastChild);
    }
    link.appendChild(textNode);
    event.preventDefault();
};

jsfiddle：http: //jsfiddle.net/TMJGH/5/

我为a元素添加了一个 id 属性以使事情变得更容易。

第一行说我们要更改处理表单中“onsubmit”事件的函数，然后我们定义该函数。“事件”参数仅用于在最后一行调用.preventDefault()，这基本上意味着我们不希望实际提交表单。

我们需要访问 javascript 代码中的 DOM 元素，所以我使用了 document.getElementById。然后我将 href 属性设置为textField的值。为了更改实际的链接文本，我使用textField的值创建了一个新的文本节点（可以使用 textNode.innerHTML，但如果有人在文本字段中插入它，它不会转义 HTML 代码）。然后我检查我们的 a元素中是否已经有一些文本 - 如果是，则必须将其删除。最后，我将文本元素作为新子元素附加到我们的 a元素中。

如果你想在一个节点中附加更多的 HTML 节点，你可以使用document.createElement('element name')轻松地创建它们并将它们附加到link。我还必须提到，jQuery 使玩 DOM 变得更加容易。

于 2013-05-11T23:16:37.787 回答