我想知道是否有用户可以添加到 html5 网页的元素？例如，他们是否可以将段落或图像添加到以前不存在的现有网页中？
例如。
<!doctype html>
<html>
<head>
</head>
<body>
<p class=”pClass”>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>
最佳答案
我做这个可能有点过头了，但我总是喜欢创建这些小例子。这是我想出的。从这个 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的使用有助于跨浏览器更一致地绑定(bind)事件处理程序。
总的来说，当您填写文本框并单击按钮时，它会添加一个 <p> (带有一些子元素)到目标区域。取决于 p 的状态，某些东西被隐藏/显示(使用 CSS)。根据单击按钮的状态(编辑/完成)，某些事情会发生。我添加了按 Escape 键“取消”编辑的功能(而不是添加另一个按钮)。
同样，我知道这可能太多了，但我希望这能帮助您了解这一切如何协同工作!
关于javascript - 让用户在网页上创建更多元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17376776/