我有一个由JS创建的DOM元素填充的div,
我希望在JS函数重复时清除div,但是我听说使用document.getElementById('elName').innerHTML = "";不是一个好主意,
这样做的有效替代方法是什么来清除div的内容？
我有一个jQuery元素集,我通过调用从DOM获得:
$(".some-selector");
我的所有元素都是各自的DIV.我的DIV设置CSS(除其他外)
display: inline-block;
这会阻止它们作为块元素呈现(每个元素都在它自己的行中).
问题是,当渲染这些DIV时,它们之间会有空格,因为每个元素之间的文档中都有换行符.我很满意.我当然可以使用float:left它来摆脱这些空间,但这不是我想要的,因为我会有容器大小等其他问题.
所以.问题是我在jQuery set中操纵这些元素的顺序然后重新渲染它们.我基本上做的是:
$(".some-selector").detach().manipulate().appendTo(".container");
// or equivalent
$(".container").append($(".some-selector").detach().manipulate());
问题是它们被重新插入DOM,但没有换行符或空格......
在将元素追加到DOM中时,如何获得这些换行符？
我正在努力使用该RegExp对象来允许我动态创建表达式,并将其应用于一组元素.
这是一个jsFiddle,下面是代码:
<div id='selectors'><span>A-F</span><span>G-L</span><span>M-S</span><span>T-Z</span></div>
<a hreh=#>Astring</a>
<a hreh=#>Cstring</a>
<a hreh=#>Xstring</a>
<a hreh=#>Dstring</a>
<a hreh=#>Zstring</a>
$('div#selectors span').click(function(){
expression = "/^["+$(this).html()+"].*$/";
rx = RegExp(expression,'i');
console.log(rx,'expression');
$("a").each(function(){
if($(this).html().match(rx) !== null){
$(this).addClass('selected');
}
});
})
我只想从维基百科的chrome控制台上做这件事.我将光标放在搜索栏中,然后尝试这样做,document.activeElement.innerHTML += "some text"但它不起作用.我用Google搜索并查看其他属性和属性,但无法弄清楚我做错了什么.
该activeElement选择器工作正常,但选择正确的元素.
编辑:我刚发现它是value属性.所以我想改变我的要求.为什么不改变innerHTML输入元素的工作？如果我不能做任何事情,为什么他们有这个属性？
我有一个包含2个控制器的页面:一个管理所谓的'apps'列表,另一个用于将新的Angular模板放入其Div元素的innerHTML中.
<div ng-controller="appList"></div>
<div ng-controller="appPane"> Dynamic content should be loaded here! </div>
我尝试过使用标准的{{expression}}绑定,但它们不能用于html,我也尝试过ng-bind-html-unsafe指令(将innerhtml绑定到App请求的返回)但控制器不是在这个新代码中执行.
问题似乎是通过使用Binding,Angular不会重新解析有问题的html的内容,以将其用作角度应用程序.有关如何解析动态内容的任何想法？
我试图让Knockout组件在初始化后绑定,ko.applyBindings();这样我就可以动态添加自定义元素.
在我的原始帖子中,我提到通过ajax加载内容,但是当使用类似jQuery的东西将自定义元素添加到DOM时,我的问题就出现了append.
这是一个例子:
$(function() {
// Register a simple widget:
ko.components.register('like-widget', {
template: '<div class="alert alert-info">This is the widget</div>'
});
// Apply bindings
ko.applyBindings();
// Wire up 'add' button:
$('#btnAdd').on('click', function() {
$('#addZone').append("<like-widget></like-widget>");
});
});<link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<body>
Here's a widget, declared inline:
<like-widget></like-widget>
<button id='btnAdd'>Add a new widget to the grey box:</button>
<br/><br/>
<div id='addZone' class="well">
Widgets will be appended here
</div>
<p>When you run this …在Angular 1中,所有DOM操作都应该在指令中完成,以确保适当的可测试性,但是Angular 2呢？这怎么改变了？
我一直在寻找好的文章或任何关于DOM操作的位置以及在做这些操作时如何思考的信息,但我每次都是空的.
以这个组件为例(这实际上是一个指令,但让我们假装它不是):
export class MyComponent {
constructor(private _elementRef: ElementRef) {
this.setHeight();
window.addEventListener('resize', (e) => {
this.setHeight();
});
}
setHeight() {
this._elementRef.nativeElement.style.height = this.getHeight() + 'px';
}
getHeight() {
return window.innerHeight;
}
}
例如,事件绑定是否属于构造函数,还是应该放在ngAfterViewInit函数中还是其他地方？您是否应该尝试将组件的DOM操作分解为指令？
这一切都只是一个模糊,所以我不确定我是否正确,我相信我不是唯一的.
Angular2中DOM操作的规则是什么？
好吧,我正在重写当前项目中的一些vanilla JS函数,而且我正处于为工具提示等生成大量HTML的地方.
我的问题是,更好/首选这样做:
var html = '<div><span>Some More Stuff</span></div>';
if (someCondition) {
html += '<div>Some Conditional Content</div>';
}
$('#parent').append(html);
要么
var html = $('<div/>').append($('<span/>').append('Some More Stuff'));
if (someCondition) {
html.append($('<div/>').append('Some conditionalContent');
}
$('#parent').append(html);
？
我需要动态创建标签和文本字段,还包括文本字段的datepicker.我需要这样的东西:
<label for="from">From </label> <input type="text" id="from" name="from" />
我在jQuery中尝试过类似的东西:
var label = $("<label>").attr('for', "from");
label.html('Date: ' +
'<input type="text" id="from name="from" value="">');
$(function() {
$("#from").datepicker();
});
这个不知何故不会创建标签和文本字段.我不确定我错过了什么.
编辑
更确切地说,我在portlet中使用它,并且我在jsp页面中没有body标签.所以当我调用函数追加到body时它不会.
forms jquery jquery-ui dom-manipulation jquery-ui-datepicker
我正在将Word文档转换为HTML并需要根据分隔符解析所述HTML.例如:
<div id="div1">
<p>
<font>
<b>[[delimiter]]Start of content section 1.</b>
</font>
</p>
<p>
<span>More content in section 1</span>
</p>
</div>
<div id="div2">
<p>
<b>
<font>[[delimiter]]Start of section 2</font>
</b>
<p>
<span>More content in section 2</span>
<p><font>[[delimiter]]Start of section 3</font></p>
<div>
<div id="div3">
<span><font>More content in section 3</font></span>
</div>
<!-- This continues on... -->
应解析为:
第1节:
<div id="div1">
<p>
<font>
<b>[[delimiter]]Start of content section 1.</b>
</font>
</p>
<p>
<span>More content in section 1</span>
</p>
</div>
第2节:
<div id="div2">
<p>
<b>
<font>[[delimiter]]Start …dom-manipulation ×10
jquery ×5
javascript ×4
dom ×3
html ×3
angular ×1
angularjs ×1
append ×1
css ×1
dynamic ×1
forms ×1
jquery-ui ×1
knockout.js ×1
line-breaks ×1
parsing ×1
php ×1
regex ×1