我曾多次听说过onClick()在HTML 中使用JavaScript事件是一种不好的做法,因为它对语义不利.我想知道缺点是什么以及如何修复以下代码？
<a href="#" onclick="popup('/map/', 300, 300, 'map'); return false;">link</a>
我试图将一大块HTML插入到div中.我想看看简单的JavaScript方式是否比使用jQuery更快.不幸的是,我忘记了如何以"旧"的方式做到这一点.:P
var test2 = function(){
var cb = function(html){
var t1 = document.getElementById("test2");
var d = document.createElement("div");
d.id ="oiio";
d.innerHtml = html;
t1.appendChild(d);
console.timeEnd("load data with javascript");
};
console.time("load data with javascript");
$.get("test1.html", cb);
}
我在这里做错了什么？
编辑:
有人问哪个更快,jquery或普通js所以我写了一个测试:http:
//jsperf.com/html-insertion-js-vs-jquery
普通js快10%
在下面的示例代码中,我将onclick事件处理程序附加到包含文本"foo"的span.处理程序是一个匿名函数,弹出alert().
但是,如果我分配给父节点alert(),则此innerHTML事件处理程序将被销毁 - 单击"foo"将无法弹出警告框.
这可以解决吗？
<html>
<head>
<script type="text/javascript">
function start () {
myspan = document.getElementById("myspan");
myspan.onclick = function() { alert ("hi"); };
mydiv = document.getElementById("mydiv");
mydiv.innerHTML += "bar";
}
</script>
</head>
<body onload="start()">
<div id="mydiv" style="border: solid red 2px">
<span id="myspan">foo</span>
</div>
</body>
</html>
我需要<br />使用javascript动态创建标记.
var br = document.createElement('br');
和
var br = document.createElement('<br />');
不起作用
第一个选项<br>在页面上创建了一个标签,该标签没有通过XHTML标准,是否有这个？
所以我只是测试 JavaScript 的基本功能。我试图将 设定<li>在 之内，<ul>但由于某些简单的原因，我li被放置在 之外ul。
var test = document.getElementById('testdiv');
var data = [1,2,3,4,5];
test.innerHTML += '<ul>';
for (var i = 0; i < data[i]; i++)
{
test.innerHTML += '<li>' + i + '=' + data[i] + '</li>';
}
test.innerHTML += '</ul>';.start{
border: 1px solid #000;
}
<div class="start" id="testdiv"></div>
目前的html结果如下所示：
<div class="start" id="testdiv">
<ul></ul>
<li>0=1</li>
<li>1=2</li>
<li>2=3</li>
<li>3=4</li>
<li>4=5</li>
</div>
如果能得到一个简单解释的预期结果，我们将不胜感激。
<div class="start" id="testdiv">
<ul>
<li>0=1</li> …我正在尝试遍历一个Array,然后使用innerHTML创建一个新的
window.onload = function() {
// Read value from storage, or empty array
var names = JSON.parse(localStorage.getItem('locname') || "[]");
var i = 0;
n = (names.length);
for (i = 0; i <= (n-1); i++) {
var list = names[i];
var myList = document.getElementById("list");
myList.innerHTML = "<li class='list-group-item' id='listItem'>"+ list + "</li>" + "<br />";
}
}
我的HTML中有一个带有id"list"的UL.
我正在创建一个页面，用户可以在其中添加问题及其解决方案，他可以删除问题，还可以使用 javascript 中的 DOM 动态编辑它。我希望每当用户单击编辑按钮时，出现的文本框就会自动对焦。
这是我页面的 javascript 代码...
var questionText;
var answerText;
var questionArray=[];
var answerArray=[];
var i=0;
var j=10000;
function addProblem(){
var body = document.getElementsByTagName('body')[0];
questionText = document.getElementById('questionId').value;
answerText = document.getElementById('answerId').value;
questionArray.unshift(questionText);
answerArray.unshift(answerText);
var myContainer = document.getElementById('container');
var myDiv = document.createElement("div");
var questionLogo = document.createElement("p");
questionLogo.id = "questionLogo";
var textNode = document.createTextNode("Question:");
var question = document.createElement("p");
question.id = "question";
var questionDetail = document.createTextNode(questionArray[0]);
var deleteButton = document.createElement("button");
deleteButton.innerHTML = "Delete";
deleteButton.id = i;
var editButton = document.createElement("button");
editButton.innerHTML = …我在模板字符串中添加 HTML 元素时遇到问题。我想在我的<li>元素中添加新行，但<br>被解释为字符串。
let movieDescription = document.createTextNode(`${moviesData[i].title} <br> ${moviesData[i].year} <br> ${moviesData[i].genre} <br>${moviesData[i].summary}`);
如何<br>在模板字符串中添加元素？
我试图通过DOMParser将字符串解析为完整的HTML文档,然后用处理过的节点覆盖当前页面.该字符串包含完整的标记,包括<!doctype>,<html>,<head>和<body>节点.
// parse the string into a DOMDocument element:
var parser = new DOMParser();
var doc = parser.parseFromString(data, 'text/html');
// set the parsed head/body innerHTML contents into the current page's innerHTML
document.getElementsByTagName('head')[0].innerHTML = doc.getElementsByTagName('head')[0].innerHTML;
document.getElementsByTagName('body')[0].innerHTML = doc.getElementsByTagName('body')[0].innerHTML;
这是因为它成功地获取了已解析的HTML节点并在页面上呈现它们; 但是,解析后的字符串中<script>的<head>或<body>节点中存在的任何标记都无法执行= [.直接使用html标签进行测试(与head/ 相反body)会产生相同的结果.
我也尝试过使用.appendChild()而不是.innerHTML()改变:
var elementHtml = document.getElementsByTagName('html')[0];
// remove the existing head/body nodes from the page
while …如何使用按钮使用JavaScript计算数组？
我的代码:
var dataset = ["A", "B", "C", "D", "E"];
var counter = 0;
function onClick() {
counter++;
};
document.write(dataset[counter]);<button type="button" onClick="onClick()">Click me</button>我想首先打印"A",然后在单击按钮时打印"B",依此类推.
我目前的代码不起作用.如何修复代码来实现这一目标？
我只是在编写这个脚本,但我无法弄清楚为什么它不会运行!任何帮助赞赏.
使用Javascript
$(document).ready(function() {
var str = document.getElementById('size').innerHTML;
var res = str.replace('<p>','<input type="checkbox" value="');
var res = str.replace('</p>','" id="size" name="size[]" checked />');
document.getElementById('size').innerHTML=res;
});
HTML
<div id="size">
<p>xs</p>
<p>s</p>
<p>m</p>
<p>l</p>
<p>xl</p>
</div>
这是JS小提琴:http://jsfiddle.net/L2LGV/
我需要从对象数组生成一个表。
例如，数组是：
let arr = [{name: 'Player1',score:10},
{name: 'Player2',score: 7},
{name: 'Player3',score:3}]
HTML 输出应该是：
| 姓名 | 分数 |
|---|---|
| 玩家1 | 10 |
| 玩家2 | 7 |
| 玩家3 | 3 |
我想不出通过普通 JS 实现这一点的方法。另外，创建表格后，我将如何对其应用CSS？
任何帮助，将不胜感激。
javascript ×12
html ×8
arrays ×2
jquery ×2
dom-events ×1
domparser ×1
ecmascript-6 ×1
innerhtml ×1
loops ×1