标签: createelement

我可以使用document.createElement('div')创建一个div标签

但是我不知道如何给它一个独特的id.

谁能帮我这个.

我知道如何使用innerHTML来做到这一点,但它非常麻烦.(我听说这不是创建布局的好方法.)

我正在寻找最短的语法,它可以提供与此dojo行相同的结果:

var divblock5 = dojo.create("div", {className: "barlittle", id: "block5"});

但我想使用纯JavaScript而不是dojo框架.我有很多动态元素创建,我希望尽可能缩短代码.

我无法让脚本创建随机数量的div.在这个5到20之间的具体例子中.问题是在for循环中可能吗？生成随机数的函数在随机颜色函数下面正常工作,我想由于某些原因无法识别.我也没有在萤火虫中得到任何错误.

例:

function generateDiv(){
    var dfrag = document.createDocumentFragment();
    var count = generateRandom(5, 20);
    var i=0;
    for (var i = 0; i < count; i++){
        var div = document.createElement("div");
        dfrag.appendChild(div);
    }
}
var divs = document.getElementsByTagName("div");
for (i = 0; i < divs.length; i++) {
    div = divs[i];
    alterDivStyle(div);
}
function rndColor() {
    var r = ('0' + generateRandom(0,255).toString(16)).substr(-2), // red
          g = ('0' + generateRandom(0,255).toString(16)).substr(-2), // green
          b = ('0' + generateRandom(0,255).toString(16)).substr(-2); // blue
    return '#' + r + g …

在我的下面,它工作正常ie9.但不是在10+,

function createList() {

  try {

    var listObj = document.getElementById('dialedList');
    //document.getElementById('dialedDiv').style.display = "inline";
    var list = opener.dialedNumbers; // This is array
    //alert("list : "+list);
    for (var i = 0; i < list.length; i++) {

      //alert(list[i])
      if (list[i] != undefined && list[i] != null && list[i] != "") {
        alert("come");
        var li = document.createElement("<li>");
        alert("not come");
        li.innerHTML = list[i];
        li.onclick = function () {
          //alert(this);
          document.getElementById('screen').value = this.innerHTML;
          document.getElementById('screen').focus();
        };
        li.onmouseover = function () {

          this.style.backgroundColor = "#719FE5";
          this.focus();
        };
        li.onmouseout …

我正在尝试使用下面的代码将按钮添加到我的页面正文中,按钮出现,但没有显示任何属性,它是一个默认按钮,不增加字体大小,没有文本显示,也没有颜色.

function createKeyboard()
	{
	   var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
	   for(var i=0; i<str.length; i++)
	   {
	    var nextChar = str.charAt(i);
	    var btn = document.createElement("BUTTON");
    	btn.setAttribute("id","btn"+nextChar);
    	btn.setAttribute("innerHtml",nextChar);
    	btn.setAttribute("value",nextChar);
    	btn.setAttribute("text",nextChar);
    	btn.setAttribute("font-size","14px");
    	btn.setAttribute("background-color","#4CAF50");
    	document.body.appendChild(btn);
    	}
    };

使用控制台查看按钮时,我可以看到属性,如下所示:

    <button id="btnA" innerhtml="A" value="A" text="A" font-size="14px"        background-color="#4CAF50"></button>

不确定我在哪里出错了,有什么想法吗？

-谢谢

我正在document.createElement插入一个iframe，但无法设置allowTransparency。这是我正在使用的代码：

var iframe = document.createElement('iframe');
iframe.className = 'example';
iframe.allowTransparency = 'true';
iframe.frameBorder = '0';
iframe.scrolling = 'no';
iframe.style.width = '260px';
iframe.style.height = '120px';
iframe.style.border = 'none';
iframe.src = '//example.com/page';
document.body.appendChild(iframe);

但是根据Web Inspector的输出仅为：

<iframe class="example" frameborder="0" scrolling="no" style="width: 260px; height: 120px; border: none; " src="//example.com/page"></iframe>

如何使用JavaScript在我想要的每个页面的内容部分中插入第二个通用(无添加ID或类)"p"节点/标记之后出现的自定义"div"元素？

例如:

<div id="main-content">
  <p>1st paragraph content.....</p>
  <p>2nd paragraph content.....</p>
  <p>3rd paragraph content.....</p>
</div>

输出:

<div id="main-content">
  <p>1st paragraph content.....</p>
  <p>2nd paragraph content.....</p>
  <div id="custom-div">Content here...</div>
  <p>3rd paragraph content.....</p>
</div>

我尝试在 Angular 4 中动态创建元素。

TS

const bookmark = document.createElement('a');
bookmark.className = 'bookmark';

社会保障局

.bookmark {
  display: block;
  background: white;
  color: #999;
  padding: 20px;
  transition: 0.3s ease all;
  border-bottom: 1px solid #DDD;
}

但是，该样式不适用于 SASS 文件中的元素。如果我直接在 JS 文件中添加样式，它的工作原理：

const bookmark = document.createElement('a');
bookmark.className = 'bookmark';

bookmark.style.display = 'block';
bookmark.style.background = 'white';
bookmark.style.color = '#999';
bookmark.style.padding = '20px';
bookmark.style.transition = '0.3s ease all';
bookmark.style.borderBottom = '1px solid #DDD';

如果我直接在 HTML 文件中创建元素，它会自动获取一个_ngcontent-c1属性，而在 TS 中创建的元素会错过这个属性（如果我在 Chrome 开发者工具 - 元素面板中手动提供它，它会从 SCSS 获取样式）。

<div …

我很确定我已经知道了答案,但我想要一个解释.

我想创建和追加一个元素,而不必在变量中定义它(这对我来说似乎是一种浪费,而且是不必要的).

var errorMessage = document.getElementById("errorMessage");

 errorMessage.innerHTML = "";

errorMessage.appendChild(document.createElement('p').appendChild(document.createTextNode("Due to an egg allergy, your child will NOT receive the flu vaccine.")));

所以这实际上将文本节点附加到errorMessage元素中,但不会生成'p'标记.

我只是认为你必须定义一个变量来创建一个新元素,这种方式更优雅,这是荒谬的.我无法在网上找到任何关于此的内容.有没有人知道这种方式的工作方式我想或可能知道为什么它不会这样工作？

我已经设法在ul元素中添加了一个类,但我无法正确地将语法添加到li和元素中.有人可以帮忙吗？

<script>
    anchors.options.placement = 'left';
    anchors.add('.entry-content h2');
    generateTableOfContents(anchors.elements);

    // External code for generating a simple dynamic Table of Contents
    function generateTableOfContents(els) {
      var anchoredElText,
          anchoredElHref,
          ul = document.createElement('UL');
          ul.className = "uk-nav uk-nav-default";

      document.getElementById('table-of-contents').appendChild(ul);

      for (var i = 0; i < els.length; i++) {
        anchoredElText = els[i].textContent;
        anchoredElHref = els[i].querySelector('.anchorjs-link').getAttribute('href');
        addNavItem(ul, anchoredElHref, anchoredElText);
      }
    }

    function addNavItem(ul, href, text) {
      var listItem = document.createElement('LI'),
          anchorItem = document.createElement('A'),
          textNode = document.createTextNode(text);

      anchorItem.href = href;
      ul.appendChild(listItem);
      listItem.appendChild(anchorItem);
      anchorItem.appendChild(textNode);
    }
</script>