如何用HTML代码直接初始化javascript中的变量

how to initialize variable in javascript with HTML code directly

本文关键字：javascript 变量 初始化 何用 HTML 代码      更新时间：2023-09-26

如何在JavaScript中使用直接的HTML代码初始化变量?

我试图把一个animate标签在一个变量，以便我可以追加到svg每当一个mouseover事件发生。我正在使用snap.svg。

var g = HTML CODE
var s = Snap("#svg");
s.mouseover(function(){
    s.append(g);
});

差不多。我知道这个语法是错误的。我不想在我的html代码中写这个标签而是把它隐藏起来然后加上

可能是最简单的方法:

var someHTML = '<div>Heeeyy</div>',
    someElem = document.getElementById('someElement'); 
someElem.onmouseover = function(){
    someElem.insertAdjacentHTML('beforeend', someHTML );
    someElem.onmouseover = null; // Remove this if you want it to happen on every mouseover event
}

或者，您可以使用document.createElement('DIV')创建一个新元素，并将innerHTML设置为所需的html。然后在父元素(所需元素)上添加appendChild创建的元素。

animateTransform在IE等浏览器上没有很好的支持，所以我倾向于避免使用该方法，如果像Snap这样的东西可用。如果是，我将执行如下操作…

s = Snap(400, 620);
var c = s.circle(10,10,10);
var myMarkup = '<g><rect x="20" y="20" width="100" height="100"></g>'
c.mouseover( function() {
  s.append( Snap.parse( myMarkup ) )
  s.select('g').animate({ transform: 't50,50' }, 3000)
})

jsfiddle(鼠标悬停在圆圈上)

如果您只是在做添加animateTransform元素的标记，那么您也可以跳过解析/附加的东西，因为这是不需要的。

相关文章：