我有两种方法可以创建一个<div>使用jQuery.
或者:
var div = $("<div></div>");
$("#box").append(div);
要么:
$("#box").append("<div></div>");
使用除可重用性之外的第二种方式有什么缺点？
我想在一个ul元素中使用javascript追加一个li元素,这是我到目前为止的代码..
var parentGuest = document.getElementById("one");
var childGuest = document.createElement("li");
childGuest.id = "two";
我熟悉appendChild,
parentGuest.appendChild(childGuest);
但是,这会将新元素添加到另一个元素中,而不是在其后.如何在现有元素之后附加新元素？谢谢.
<ul>
<li id="one"><!-- where the new li is being put --></li>
<!-- where I want the new li -->
</ul>
如果在函数中创建元素,如:
function makeDomElement()
{
var createdElement = document.createElement('textarea');
}
并且你不会在DOM中的任何地方附加它,即通过.appendChild函数,它是否仍然保留在内存中？所以你必须这样做
function makeDomElement()
{
var createdElement = document.createElement('textarea');
delete createdElement;
}
我只是好奇 :)
这个完整的错误
警告:React.createElement:type不应为null或undefined.它应该是一个字符串(对于DOM元素)或一个ReactClass(对于复合组件).
这就是我在这个观点中所拥有的一切
import React, { Component } from 'react';
import Router, {Link, RouteHandler} from 'react-router';
import { Grid, Row, Column, List, ListItem } from '../../components/Layout';
import { RaisedButton, Paper } from 'material-ui';
const videosInformation = {
time : 25,
gameId : 15665,
date : '12 10 2015',
gameName : "Black Jack"
};
export default class Home extends Component {
static contextTypes = {
router : React.PropTypes.func
}
render () {
return <Grid>
<Row>
<Column>
<Paper>
<List subheader="Player Info">
<ListItem …我正在尝试创建一个div已经存在的内部的一个非常基本的例子div.
我使用它时似乎没有工作:
document.getElementbyId('lc').appendChild(element)
但是当我这样做时工作正常:
document.body.appendChild(element)
我需要添加windows.onload功能吗？虽然它甚至不起作用!
HTML代码:
<body>
<input id="filter" type="text" placeholder="Enter your filter text here.." onkeyup = "test()" />
<div id="lc">
</div>
</body>
JS代码:
function test()
{
var element = document.createElement("div");
element.appendChild(document.createTextNode('The man who mistook his wife for a hat'));
document.getElementbyId('lc').appendChild(element);
//document.body.appendChild(element);
}
我对编写代码的风格很困惑.我想知道在文档中插入HTML标记的实用且有效的方法.
使用Javascript:
document.getElementById('demoId').innerHTML='<div>hello world and <a>click me</a> also</div>';
要么
var itd=document.createElement('div'),
ita=document.createElement('a'),
idt=document.createTextNode('hello world');
iat=document.createTextNode('click me');
idn=document.createTextNode('also');
ita.appendChild(iat);
itd.appendChild(idt);
itd.appendChild(ita);
itd.appendChild(idn)
docuemtn.getElementById('demoId').appendChild(itd);
哪种方法最快最好？
在Javascript中动态创建DOM选项元素的首选方法是什么？我发现在实际代码中使用了Option构造函数和createElement变体,如下所示:
var option = new Option(text, value);
还有这个:
var option = document.createElement('option');
option.text = text;
option.value = value;
这些方法有任何缺点/兼容性问题吗？此外,还有其他任何方法可以动态创建选项,出于某些原因应优先考虑上述选项吗？
将HTML代码添加到DOM有两种方法,我不知道最好的方法是什么.
第一种方法
第一种方式是简单的方法,我可以简单地添加HTML代码(使用jQuery)$('[code here]').appendTo(element);,这很像element.innerHTML = [code here];
第二种方法
另一种方法是逐个创建所有元素,如:
// New div-element
var div = $('<div/>', {
id: 'someID',
class: 'someClassname'
});
// New p-element that appends to the previous div-element
$('<p/>', {
class: 'anotherClassname',
text: 'Some textnode',
}).appendTo(div);
此方法使用核心功能,如document.createElement和element.setAttribute.
什么时候应该使用第一种方法,何时使用第二种方法？方法二比方法一快吗？
编辑 - 速度测试的结果
我做了三个速度测试,代码如下:
$(document).ready(function(){
// jQuery method - Above mentioned as the second method
$('#test_one').click(function(){
startTimer();
var inhere = $('#inhere');
for(i=0; i<1000; i++){
$(inhere).append($('<p/>', {'class': 'anotherClassname' + i, text: 'number' …我正在动态生成内容,在某些情况下,我需要将a设置 为<span>元素的唯一内容.
但是,以下添加 为文本vs添加空格:
var foo = document.createElement("span")
foo = document.createTextNode(" ");
这是有道理的,所以我想知道,如果 没有(!)使用,我将如何正确添加innerHTML
感谢帮助!
javascript whitespace innerhtml createtextnode createelement
我正在尝试使用javascript来创建一个按钮,该按钮具有一个onclick事件,该事件调用头部中定义的函数,该函数作为相对于按钮的dom对象的参数.我该怎么做呢？
例如:
<html>
<head> <script>function blah(obj){alert(obj.value)}</script></head>
<body>
<button onclick="blah(this.parentNode.value);"></button>
</body>
</html>
JavaScript的:
var newButton = document.createElement("button");
???
最后我希望新按钮与现有按钮相同.
createelement ×10
javascript ×10
dom ×3
html ×2
jquery ×2
append ×1
appendchild ×1
html-select ×1
innerhtml ×1
optimization ×1
reactjs ×1
whitespace ×1