1

ユーザーがhtml5 Webページの要素に追加できる方法があるかどうか知りたいですか? たとえば、以前は存在しなかった既存の Web ページに段落や画像を追加できる方法はありますか?

例えば。

<!doctype html>
    <html>
    <head>
    </head>
    <body>
    <p class=”pClass”&gt;This is in a paragraph.</p>

    **//would it be possible for a user to insert several paragraphs here with the click of a button or something?**


    </body>
    </html>
4

3 に答える 3

2

私はこれを作るのに少し行き過ぎたかもしれませんが、私はいつもこれらの小さな例を作るのが好きです. これが私が思いついたものです。次の HTML から始めます。

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

そしてこのCSS：

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;
}

そして、この 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);

デモ: http://jsfiddle.net/8K3pN/2/

を使用するaddEventと、イベント ハンドラーをブラウザー間でより一貫してバインドするのに役立ちます。

全体的に何が起こるかというと、テキストボックスに入力してボタンをクリックすると、<p>(いくつかの子要素を含む) がターゲット領域に追加されます。の状態に応じてp、特定のものが非表示/表示されます (CSS を使用)。ボタンがクリックされた状態 (編集/完了) に応じて、特定のことが起こります。Escape キーを押して編集を「キャンセル」する機能を追加しました (別のボタンを追加する代わりに)。

繰り返しますが、これはおそらく多すぎると思いますが、これがどのように連携できるかを理解するのに役立つことを願っています!

于 2013-06-29T17:13:52.093 に答える
0

他の人が言っているように、何を達成したいのかわかりませんが、document.createElement()関数を使用して JavaScript からドキュメントに要素を追加できます。テキストを入力するテキスト ボックスを提供し、JS 関数を呼び出して div に段落を追加することができます。

于 2013-06-29T05:22:01.130 に答える