标签: createelement

createElement 背景图片

我正在尝试创建一个表格宽度的 javascript 和 createElement()。我的问题是它没有设置任何背景图像(只是纯白色)。但是,如果我将 的innerHTML 设置为具有相同路径的图像标签,它就可以工作!

create : function () {
    var tbody = document.createElement('tbody');
    for(i in this.map) {
        var tr = document.createElement('tr');
        for(j in this.map[i]) {
            var td = document.createElement('td');
            var cell = this.map[i][j];
            td.style.color = "red";
            console.log("gfx/tile_"+this.backgrounds[cell]+".png");
            td.style.backgroundImage = "url(gfx/tile_"+this.backgrounds[cell]+".png);";
            td.innerHTML = "j";
            tr.appendChild(td);
        }
        tbody.appendChild(tr);
    }
    this.gameDOMelm.appendChild(tbody);
}
Run Code Online (Sandbox Code Playgroud)

我还有另一个问题,表中的每个 ROW 之间都有空间。这是我要附加到的 DOM 元素:

<table id="gameField" cellpadding="0" cellspacing="0"></table>
Run Code Online (Sandbox Code Playgroud)

和 CSS

    * {padding: 0; margin: 0;}
    td {
        min-width: 32px;
        min-height: 32px;
        width: 32px;
        height: 32px;
    }
Run Code Online (Sandbox Code Playgroud)

这些问题在 Chrome …

javascript background-image createelement

4
推荐指数
1
解决办法
3864
查看次数

如何动态添加元素到HTML5 SVG?

我已经阅读了几个与此类似的问题,但我无法使代码正常工作.我想在用户点击SVG区域时添加SVG元素.

这是我的带有SVG的HTML5,它正确呈现:

<!DOCTYPE html>
<html>
  <head>
    <script src="jquery-1.6.2.min.js"></script>
    <script src="svgdraw.js"></script>
  </head>
  <body>
    <svg id="canvas" width="500" height="500">
    <circle cx="80" cy="80" r="50" fill="blue"/>
    </svg>
  </body>
</html>
Run Code Online (Sandbox Code Playgroud)

以下是在click事件上执行的JavaScript:

    var svgDocument = document.getElementById('canvas');
    var svgns = "http://www.w3.org/2000/svg";
    var shape = svgDocument.createElementNS(svgns,"circle");
    shape.setAttributeNS(null, "cx", 25);
    shape.setAttributeNS(null, "cy", 25);
    shape.setAttributeNS(null, "r", 20);
    shape.setAttributeNS(null, "fill", "green");
    document.getElementById('canvas').appendChild(shape);
Run Code Online (Sandbox Code Playgroud)

在Google Chrome中,我收到一条createElementNS不存在的错误消息.但如果我删除所有NSnull任何一个,我无法使它工作.这样做的正确方法是什么?不同的浏览器是不同的?

javascript html5 svg createelement

4
推荐指数
1
解决办法
5656
查看次数

使用PHP DOMDocument添加样式标记

我想创建一组<style>标签并将其添加到HTML文档的head标签中.

我知道我可以这样开头:

$url_contents = file_get_contents('http://example.com');
$dom = new DOMDocument;
$dom->loadHTML($url_contents);

$new_elm = $dom->createElement('style', 'css goes here');
$elm_type_attr = $dom->createAttribute('type');
$elm_type_attr->value = 'text/css';
$new_elm->appendChild($elm_type_attr);
Run Code Online (Sandbox Code Playgroud)

现在,我也知道我可以像这样在HTML中添加新的样式标记:

$dom->appendChild($ss_elm);
$dom->saveHTML();
Run Code Online (Sandbox Code Playgroud)

但是,这将创建以下方案:

<html>
<!--Lots of HTML here-->
</html><style type="text/css">css goes here</style>
Run Code Online (Sandbox Code Playgroud)

以上基本上没有意义; CSS没有解析,只是坐在那里.

我在网上找到了这个解决方案(显然没有用):

$head = $dom->getElementsByTagName('head');
$head->appendChild($new_elm);
$dom->saveHTML();
Run Code Online (Sandbox Code Playgroud)

谢谢您的帮助!!

编辑:

可能吗?

css php appendchild domdocument createelement

4
推荐指数
2
解决办法
6950
查看次数

Javascript:处理GET错误(document.createElement)

我正试图在我的文档中"包含"一个JS文件.它工作正常,但是当文件脱机时,它应该将变量设置为FALSE.我用谷歌搜索,但我没有得到它.所以我尝试使用try/catch:

    try {
      var jq = document.createElement('script');
      //jq.onload = put;
      jq.type = 'text/javascript';
      jq.src = 'http://127.0.0.1:9666/jdcheck.js';
      document.getElementsByTagName('head')[0].appendChild(jq);
    }
    catch(e) {
    console.log('An error has occurred: '+e.message);
        jdownloader = false;

    }
Run Code Online (Sandbox Code Playgroud)

它只是抛出了我的错误

  Failed to load resource http://127.0.0.1:9666/jdcheck.js
Run Code Online (Sandbox Code Playgroud)

如何将var设置为FALSE?

谢谢Markus

javascript error-handling google-chrome createelement

4
推荐指数
1
解决办法
2300
查看次数

如何将 .createElement("image") 也变成链接

我已经设法让图像以我想要的方式列出,现在我将每个图像作为一个链接,指向它自己的 URL

现在是什么:

<img src="01.jpg" />
Run Code Online (Sandbox Code Playgroud)

我希望它是什么:

<a href="01.jpg" target="_new"><img src="01.jpg" /></a>
Run Code Online (Sandbox Code Playgroud)

当前代码:

<script>
  var fullLink = 'http://www.website.com/'; //Public URL
  var ext = ".jpg"; //File Extension 

  for ( var i = 1; i < 6 ; i++ ) {
    var link = document.createElement('a');
    var elem = document.createElement("img");
    if (i < 10) {
      link.setAttribute("href", fullLink+"0"+i+ext);
      elem.setAttribute("src", fullLink+"0"+i+ext);
    } else {
      link.setAttribute("href", fullLink+i+ext);
      elem.setAttribute("src", fullLink+i+ext);
    }
      elem.setAttribute("height", "250px");
      document.getElementById("images").appendChild(link);
      document.getElementById("images").appendChild(elem);
  }
</script>
Run Code Online (Sandbox Code Playgroud)

html javascript image hyperlink createelement

4
推荐指数
1
解决办法
6320
查看次数

创建多个元素

JavaScript

var textBlock = document.createElement('div');
textBlock.setAttribute('class', 'finalBlock');

var addFinalBlock = document.getElementsByClassName('block')[0];
addFinalBlock.appendChild(textBlock);

textBlock.innerHTML = "Make this block a text block";

// -------
var textBlock2 = document.createElement('div');
textBlock2.setAttribute('class', 'finalBlock');

var addFinalBlock2 = document.getElementsByClassName('block')[0];
addFinalBlock2.appendChild(textBlock2);

textBlock2.innerHTML = "Make this block a text block2";

// -------
var textBlock3 = document.createElement('div');
textBlock3.setAttribute('class', 'finalBlock');

var addFinalBlock3 = document.getElementsByClassName('block')[0];
addFinalBlock3.appendChild(textBlock3);

textBlock3.innerHTML = "Make this block a text block3";

// -------
var textBlock4 = document.createElement('div');
textBlock4.setAttribute('class', 'finalBlock');

var addFinalBlock4 = document.getElementsByClassName('block')[0];
addFinalBlock4.appendChild(textBlock4);

textBlock4.innerHTML = "Make this block …
Run Code Online (Sandbox Code Playgroud)

javascript createelement

4
推荐指数
2
解决办法
2万
查看次数

反应JS。将元素附加到 DOM

我是新来的,过去几天我一直在玩它。我正在尝试向 DOM 附加一个值,我找到了一种方法,但我正在寻找一种方法

var para = document.createElement("li");
var t = document.createTextNode(value);
para.appendChild(t);
document.getElementById("root").appendChild(para); 
Run Code Online (Sandbox Code Playgroud)

但是,我正在寻找不同的方式。我尝试了几种不同的方法,但我被卡住了。除了上面的这个方法还有别的方法吗^^^^

import React, { Component } from 'react';
import { render } from 'react-dom';


export class Parent extends React.Component {
  constructor(props) {
    this.greet = this.greet.bind(this);
    this.state = { text: " " };
  }

  greet(value) {
    //console.log(value);

    var para = document.createElement("li");
    var t = document.createTextNode(value);
    para.appendChild(t);
    document.getElementById("root").appendChild(para); 

  }

  render() {
    return (
      <div>
        <Child onGreet={this.greet} />
      </div>
    )
  }
};


export class Child extends React.Component {

  constructor(props) { …
Run Code Online (Sandbox Code Playgroud)

javascript dom createelement reactjs

4
推荐指数
1
解决办法
2万
查看次数

创建样式节点,添加innerHTML,添加到DOM和IE头痛

我有两个问题.

首先,场景:

由于我们在NOSCRIPT的移动浏览器支持方面遇到了一些奇怪的问题,我的任务是提出另一种"检测"JS的解决方案.解决方案逻辑是在页面上有两个DIV.一个是错误,表明你没有JS和他默认显示.如果有一个JS,我们想要向HEAD添加一个新的STYLE块,它会覆盖以前的CSS并隐藏错误,而是显示内容.

示例HTML:

<div id="div1">div 1 (should be shown if JS enabled)</div>
<div id="div2">div 2 (should be hidden if JS enabled)</div>
Run Code Online (Sandbox Code Playgroud)

这是我开始的JS:

  var styleNode = document.createElement('style');
  styleNode.setAttribute("type", "text/css");
  styleNode.innerHTML = "#div1 {display: block;} #div2 {display: none;}";
  headTag.appendChild(styleNode);
Run Code Online (Sandbox Code Playgroud)

但是,我遇到了问题.一些谷歌搜索导致IE可以拥有的安全问题的描述,如果您尝试在将innerHTML放入创建的元​​素之前将其插入到DOM中:

http://karma.nucleuscms.org/item/101

所以,我修改了脚本:

  var styleNode = document.createElement('style');
  styleNode.setAttribute("type", "text/css");
  var headTag = document.getElementsByTagName("head")[0];
  headTag.appendChild(styleNode);
  var aStyleTags = headTag.getElementsByTagName("style");
  var justAddedStyleTag = aStyleTags[aStyleTags.length-1];
  justAddedStyleTag.innerHTML = "#div1 {display: block;} #div2 {display: none;}";
Run Code Online (Sandbox Code Playgroud)

问题1:这是IE问题的有效解决方法吗?有更有效的解决方案吗?

问题2:即使进行了调整,脚本仍然无法在IE中运行.它在Firefox中工作正常,但在IE 7中我得到了"未知的运行时错误".

我在JSBIN上有这个代码的示例:

http://jsbin.com/ucesi4/4

有谁知道IE正在发生什么?

更新:

我通过谷歌偶然发现了这个链接.请注意最后的评论:

http://msdn.microsoft.com/en-us/library/ms533897%28VS.85%29.aspx

也就是说,你真的应该把所有的样式规则都放在HEAD中,以便严格遵守XHTML.这样做也有点棘手,因为你不能使用innerHTML直接注入HEAD或STYLE元素.(这两个标签都是READ.). …

javascript internet-explorer createelement

3
推荐指数
1
解决办法
1万
查看次数

如何使用 DOMDocument insertBefore

我有一个 div,我试图在 div 中现有的 h3 和 p 元素之前插入几个元素(h3 和 p)。insertBefore ( http://www.php.net/manual/en/domnode.insertbefore.php )的 PHP 文档说这正是应该发生的情况,但它不是在现有元素之前插入,而是替换里面的所有现有元素我的“内容”分区。

这是我的代码:

$webpage = new DOMDocument();
$webpage->loadHTMLFile("news.html");

$headerelement = $webpage->createElement('h3', $posttitle);
$pelement = $webpage->createElement('p', $bodytext);

$webpage->formatOutput = true;
$webpage->getElementById('content')->insertBefore($headerelement);
$webpage->getElementById('content')->insertBefore($pelement);

$webpage->saveHTMLFile("newpost.html");
Run Code Online (Sandbox Code Playgroud)

我确信我只是不明白一些事情......任何帮助将不胜感激,谢谢。

php appendchild domdocument createelement

3
推荐指数
1
解决办法
6180
查看次数

VueJs CreateElement() 插入动态html

我构建了一个组件来将所有图标转换为 SVG。

所以,在我的代码末尾,我有这个:

     return createElement('i',
        '<SVG>CODE</SVG>'
      )
Run Code Online (Sandbox Code Playgroud)

这个SPAN在哪里,我应该加个动态HTML!我找不到任何选择来做到这一点。这个 HTML 将是一个 SVG,因此,出于这个原因,我需要添加完整的 HTML。

有人有同样的问题吗?有什么不见了??当我的组件正在运行时,如何将其设为新的 HTML ???

ps:我不需要知道如何创建 SVG 文件,但是是的,如何在我的动态组件内呈现 HTML,可以是任何人。

谢谢

javascript createelement vue.js

3
推荐指数
1
解决办法
4997
查看次数