Javascript 让用户在网页上创建更多元素_Javascript_Html_User Input

Javascript 让用户在网页上创建更多元素

javascript html

Javascript 让用户在网页上创建更多元素,javascript,html,user-input,Javascript,Html,User Input,我想知道用户是否可以添加到html5网页的元素中？例如，他们是否可以将以前没有的段落或图像添加到现有网页中例如这是一个段落 **//用户是否可以通过点击按钮或其他方式在此处插入几个段落** 正如其他人所说，我们不确定您想要完成什么，但是您可以使用document.createElement（）函数从JavaScript向文档中添加元素。您可以提供一个文本框来输入文本，然后调用JS函数将段落添加到div中。这就是您的想法吗 <!doctype html> <html

我想知道用户是否可以添加到html5网页的元素中？例如，他们是否可以将以前没有的段落或图像添加到现有网页中

例如


这是一个段落
**//用户是否可以通过点击按钮或其他方式在此处插入几个段落**

正如其他人所说，我们不确定您想要完成什么，但是您可以使用

document.createElement（）

函数从JavaScript向文档中添加元素。您可以提供一个文本框来输入文本，然后调用JS函数将段落添加到div中。

这就是您的想法吗

<!doctype html>
    <html>
    <head>
    <script type="text/javascript">
        var count = 1;
        function newPara() {
            var new_p = document.createElement('p');
            new_p.setAttribute('class','pClass');
            new_p.setAttribute('id','new_para_'+ count++);

            var newContent = document.createTextNode(document.getElementById('content').value);
            new_p.appendChild(newContent);

            document.getElementsByTagName('body')[0].insertBefore(new_p,document.getElementById('create'));
        }
    </script>
    </head>
    <body>
    <p class=”pClass”>This is in a paragraph. <br/></p>


    <div id="create">
    <textarea id="content"> </textarea>
    <button onclick="newPara();"> Create </button>
    </div>


    </body>
    </html>


var计数=1；
函数newPara（）{
var new_p=document.createElement（'p'）；
新的setAttribute（'class'，'pClass'）；
new_p.setAttribute（'id'，'new_para'+count++）；
var newContent=document.createTextNode（document.getElementById（'content'）.value）；
新附录子项（新内容）；
document.getElementsByTagName（'body'）[0].insertBefore（new_p，document.getElementById（'create'））；
}
这是一个段落

创造

我可能做得太过分了，但我总是喜欢创建这些小示例。这是我想到的。从以下HTML开始：

<input type="text" id="txt1" />
<button id="btn1">Add Item</button>
<hr />
<div id="targetArea"></div>

并使用以下JavaScript：

var textProp = "textContent" in document.createElement("div") ? "textContent" : "innerText";

function strTrim(str) {
    if (!str) {
        str = "";
    }
    return str.replace(/^\s+|\s+$/g, "");
}

function addEvent(element, eventName, callback) {
    if (element.addEventListener) {
        element.addEventListener(eventName, callback, false);   
    } else if (element.attachEvent) {
        element.attachEvent("on" + eventName, callback);
    }
}

function editableClickHandler(e) {
    var actionButton, pNode, myText, myEditor;

    actionButton = this;
    pNode = actionButton.parentNode;
    myText = pNode.querySelector("span.text");
    myEditor = pNode.querySelector("input.editor");

    if (actionButton.value === "Edit") {
        actionButton.value = "Done";
        pNode.className += " editing";
        myEditor.setAttribute("data-original-val", myText[textProp]);    // Save current value in case of canceling
        myEditor.value = myText[textProp];
    } else {
        actionButton.value = "Edit";
        pNode.className = "editable";
        myText[textProp] = myEditor.value;
    }
}

function escapeCheckHandler(e) {
    var keyCode, pNode, myEditor, myText, myActionButton;

    e = e || window.event;    // Normalize event
    keyCode = e.keyCode || e.which || e.charCode;    // Normalize keycode

    if (keyCode === 27) {    // Escape key
        pNode = this.parentNode;
        myEditor = pNode.querySelector("input.editor");
        myText = pNode.querySelector("span.text");
        myActionButton = pNode.querySelector("input.action");

        pNode.className = "editable";
        myText = myEditor.getAttribute("data-original-val");
        myActionButton.value = "Edit";
    }
}

function addClickHandler() {
    var target, curInput, curInputVal, newP, newText, newEditor, newActionButton, newEscapeInfo;

    curInput = document.getElementById("txt1");
    curInputVal = strTrim(curInput.value);

    if (!curInputVal) {
        alert("Must provide actual text");
        return;
    }

    target = document.getElementById("targetArea");
    newP = document.createElement("p");
    newText = document.createElement("span");
    newEditor = document.createElement("input");
    newActionButton = document.createElement("input");

    newP.className = "editable";

    newText.className = "text";
    newText[textProp] = curInputVal;
    newP.appendChild(newText);

    newEditor = document.createElement("input");
    newEditor.type = "text";
    newEditor.className = "editor";
    addEvent(newEditor, "keyup", escapeCheckHandler);
    newP.appendChild(newEditor);

    newActionButton.type = "button";
    newActionButton.className = "action";
    newActionButton.value = "Edit";
    addEvent(newActionButton, "click", editableClickHandler);
    newP.appendChild(newActionButton);

    newEscapeInfo = document.createElement("em");
    newEscapeInfo.className = "escape";
    newEscapeInfo[textProp] = "(Press Escape to Cancel Editing)";
    newP.appendChild(newEscapeInfo);

    curInput.value = "";
    target.insertBefore(newP, target.firstChild);
}

function loadHandler() {
    addEvent(document.getElementById("btn1"), "click", addClickHandler);
}

addEvent(window, "load", loadHandler);

演示：

使用

addEvent

有助于跨浏览器更一致地绑定事件处理程序

总的来说，当您填写文本框并单击按钮时，它会向目标区域添加一个

（带有一些子元素）。根据

的状态，某些内容会隐藏/显示（使用CSS）。根据点击按钮的状态（编辑/完成），某些事情会发生。我添加了按Escape键“取消”编辑的功能（而不是添加另一个按钮）

再一次，我知道这可能太多了，但我希望这能帮助你理解这一切是如何协同工作的

如果您的目的是允许用户添加内容，您通常会使用类似的wiki软件。如果没有-？是的，这里有一个例子：@Yve这取决于你试图做什么。你想给他们提供一个文本框，并让该值成为段落的内容吗？@Yve哦，对不起，我不知道为什么我认为你是作者。。。哦：）@Yve对不起，我在最后一句话后离开了。然后今天我做了一个更完整的例子，作为答案发布。我感谢你的评论，也感谢你提出了另一个问题供我回答，但希望我在这里的回答能对OP有所帮助：）

p.editable input.editor,
p.editable input.action,
p.editable em.escape {
    display: none;
}

p.editable input.action {
    margin-left: 15px;
}

p.editable em.escape {
    margin-left: 10px;
    font-size: 8px;
}

p.editable:hover input.action {
    display: inline;
}

p.editable.editing span.text {
    display: none !important;
}

p.editable.editing input.editor,
p.editable.editing input.action,
p.editable.editing em.escape {
    display: inline !important;
}

var textProp = "textContent" in document.createElement("div") ? "textContent" : "innerText";

function strTrim(str) {
    if (!str) {
        str = "";
    }
    return str.replace(/^\s+|\s+$/g, "");
}

function addEvent(element, eventName, callback) {
    if (element.addEventListener) {
        element.addEventListener(eventName, callback, false);   
    } else if (element.attachEvent) {
        element.attachEvent("on" + eventName, callback);
    }
}

function editableClickHandler(e) {
    var actionButton, pNode, myText, myEditor;

    actionButton = this;
    pNode = actionButton.parentNode;
    myText = pNode.querySelector("span.text");
    myEditor = pNode.querySelector("input.editor");

    if (actionButton.value === "Edit") {
        actionButton.value = "Done";
        pNode.className += " editing";
        myEditor.setAttribute("data-original-val", myText[textProp]);    // Save current value in case of canceling
        myEditor.value = myText[textProp];
    } else {
        actionButton.value = "Edit";
        pNode.className = "editable";
        myText[textProp] = myEditor.value;
    }
}

function escapeCheckHandler(e) {
    var keyCode, pNode, myEditor, myText, myActionButton;

    e = e || window.event;    // Normalize event
    keyCode = e.keyCode || e.which || e.charCode;    // Normalize keycode

    if (keyCode === 27) {    // Escape key
        pNode = this.parentNode;
        myEditor = pNode.querySelector("input.editor");
        myText = pNode.querySelector("span.text");
        myActionButton = pNode.querySelector("input.action");

        pNode.className = "editable";
        myText = myEditor.getAttribute("data-original-val");
        myActionButton.value = "Edit";
    }
}

function addClickHandler() {
    var target, curInput, curInputVal, newP, newText, newEditor, newActionButton, newEscapeInfo;

    curInput = document.getElementById("txt1");
    curInputVal = strTrim(curInput.value);

    if (!curInputVal) {
        alert("Must provide actual text");
        return;
    }

    target = document.getElementById("targetArea");
    newP = document.createElement("p");
    newText = document.createElement("span");
    newEditor = document.createElement("input");
    newActionButton = document.createElement("input");

    newP.className = "editable";

    newText.className = "text";
    newText[textProp] = curInputVal;
    newP.appendChild(newText);

    newEditor = document.createElement("input");
    newEditor.type = "text";
    newEditor.className = "editor";
    addEvent(newEditor, "keyup", escapeCheckHandler);
    newP.appendChild(newEditor);

    newActionButton.type = "button";
    newActionButton.className = "action";
    newActionButton.value = "Edit";
    addEvent(newActionButton, "click", editableClickHandler);
    newP.appendChild(newActionButton);

    newEscapeInfo = document.createElement("em");
    newEscapeInfo.className = "escape";
    newEscapeInfo[textProp] = "(Press Escape to Cancel Editing)";
    newP.appendChild(newEscapeInfo);

    curInput.value = "";
    target.insertBefore(newP, target.firstChild);
}

function loadHandler() {
    addEvent(document.getElementById("btn1"), "click", addClickHandler);
}

addEvent(window, "load", loadHandler);