我正在尝试使用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");
???
最后我希望新按钮与现有按钮相同.
我想通过像这样使用"div.someelement"在Jquery/Javascript中创建元素
var SomeElement = $("div.someelement");
$( "#container" ).append( SomeElement );
但是我不想复制同一个类的元素,我想创建一个新的元素.
document.createElement是创造"<div.somelement>"而不是<div class="someelement">
我正在动态创建脚本标记:
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.charset = 'utf-8';
script.defer = true;
script.async = true;
script.text = 'some my javascript content here';
head.appendChild(script);
script.onload = function () {
// this never get fired..
debugger;
}
如何在其他代码块中执行脚本时收到通知？也许有些事件？
谢谢!
我试图只用JS创建这样的元素:
<input type="text" value="default">
为此,我尝试了这段代码:
var mi = document.createElement("input");
mi.type= "text"
mi.value = "default"
但是当我在Chrome开发工具中运行它时,它只会创建这个元素:
<input type="text">
我错过了什么？
为了什么我要完成,我可以使用createElement()或innerHTML与一个字符串.
到底哪个真的更快？很长一段时间以来,我一直认为字符串比返回相同结果的内置函数慢得多,但这是真的吗？
我问,因为我已经尝试过createElement(),似乎所有必须添加到每个元素的属性都会减慢速度.不仅如此,它也占用了更多的空间.我有一个循环,根据数组的长度从1-infinity到任何地方,但最好在显示减速迹象之前添加多达50个左右的元素.在我想要创建的这50个元素中,大约有10个元素.所以,总的来说,它实际上创造了大约500个元素.
通过创建具有内置函数的元素,我注意到比平时更快的减速,并且由于我无意中重置该数组(数组是5D并且未在同一脚本中设置),我想知道哪个在完成任务之前,无论是速度还是简单的更好的练习,都是真的更好.
我按照我在互联网上找到的方式动态创建一个按钮:
Page = function(...) {
...
};
Page.prototype = {
...
addButton : function() {
var b = content.document.createElement('button');
b.onclick = function() { alert('OnClick'); }
},
...
};
不幸的是,它没有工作并抛出以下错误:
Error: [Exception... "Component is not available" nsresult: "0x80040111
(NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: chrome://knowledgizer/content
/knowledgizer.js :: <TOP_LEVEL> :: line 137" data: no]
Source File: chrome://browser/content/tabbrowser.xml Line: 434
setAttribute的解决方案:
b.setAttribute("onClick", "alert('OnClick')");
但是,我希望调用一个类方法(而不是alert),并且b.onclick语法在这方面看起来更好,我希望/想.这个onclick案件是否敏感？因为如果我写
b.onClick = function() {alert("OnClick");} // notice the spelling onclick vs onClick
我没有得到上面的错误,但它仍然无法正常工作,即我没有收到警报.我很感谢任何提示.
作为一个额外的问题:如何在单击按钮时避免重新加载当前页面？我只是想调用一个方法而不是导致页面重新加载.
谢谢和最好的问候,
基督教
我试图在body.
现在我有这个：
// Prepend vsr-toggle
var vsrToggle = document.createElement("div");
vsrToggle.innerHTML = "<input type='checkbox' name='sr-toggle' id='srToggle'><label for='srToggle' role='switch'>Screen reader</label>"
document.body.insertBefore(vsrToggle, pageContent);
它工作正常，因为 HTML 被添加到创建的div. 但是，我需要在前面添加此元素而不将其包装在 div 中。
有没有一种方法可以在不先创建元素的情况下添加 HTML？如果没有，我可以将 the 创建input为自关闭元素并将其附加label到它吗？
有更好的方法来实现这一目标吗？
干杯!
请参阅下面的代码，即使指定了插槽名称，当前所有子项都在默认插槽中呈现。
不确定 vue createElement 函数是否支持命名槽？
@Component({
props:[]
})
export class TestComponent extends Widget{
items:any[];
render(h:any){
const rootcmp = {
template:`<div>
Temp:<slot name="temp"></slot>
Default:<slot></slot>
</div>`
, data:()=>{
return {};
}
}
const cmp = {
template:'<div slot="default">This is child</div>'
, data:()=>{
return {};
}
}
const cmp2 = {
template:'<div slot="temp">This is child</div>'
, data:()=>{
return {};
}
}
return h(rootcmp, [h(cmp), h(cmp2)]);
}
}
当前行为：
<div>
Temp:Default:
<div>This is child</div>
<div>This is child</div>
</div>
预期行为：
<div>
Temp:
<div>This is child</div> …我正在尝试在javascript不使用 的情况下创建一个按钮元素jQuery。
当我尝试将其附加到 DOM 时，我不断收到错误消息。
“无法读取 null 的属性‘appendChild’”
我到处都找遍了，但找不到如何创建按钮。在 w3Schools 示例中，他们在已经在 HTML 中创建的按钮元素上使用了一个函数，这不是我想要做的。这就是我所拥有的。
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="myapp.js"></script>
</head>
<body>
<div id="btn">Button Here</div>
</body>
</html>
myapp.js
var element = document.createElement("button");
element.appendChild(document.createTextNode("Click Me!"));
var page = document.getElementById("btn");
page.appendChild(element);
console.log(element);
我有一个在 JavaScript 中生成的 iframe，createElement()当一个函数被触发时，它变成了一个文本编辑器。它在 Chrome、Safari 和 Edge 中运行良好，但在 Firefox 中，innerHTML文本“文本层”将在 iframe 中短暂闪烁，然后消失，并且 iframe 似乎不可编辑。经检查，iframe 的 body 标签为空。如果我contentEditable在检查器中将 iframe 的 body 标记设置为 true，它似乎可以正常工作，但是当我尝试在我的 JS 函数中设置它时，Firefox 中没有任何反应。
我猜这与在 JavaScript 中创建的 iframe 有关，因为将designModeDOM 中已经存在的 iframe设置为'On'with JS 似乎可以正常工作。想知道是否有办法让它在 Firefox 中工作，也许是另一种创建 iframe 的方法？我看到了一些类似的问题，这些问题是通过在 iframe 中放置一些 javascript 来解决的src，就像这里的评论一样，但这显然会导致其他浏览器出现问题。在 JS 中创建 iframe 比从某个地方附加它更可取。
function text() {
var rtf = document.createElement("iframe");
rtf.name = "richTextField";
rtf.id = "richTextField";
rtf.className = "texteditor";
var dwrap = document.createElement("div"); …createelement ×10
javascript ×9
html ×4
element ×2
button ×1
dom ×1
dynamic ×1
firefox ×1
iframe ×1
innerhtml ×1
jquery ×1
onclick ×1
performance ×1
prepend ×1
render ×1
script-tag ×1
slot ×1
vue.js ×1
vuejs2 ×1