Question

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

我正在尝试在变量中添加animate标记，以便每当mouseover事件发生时我都可以附加到svg。我正在使用snap.svg。

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

这样的事情。我知道这种语法错了。我不想在我的HTML代码中写这个标签，但保持隐藏，然后追加它

Answer 1

可能是最简单的方法：

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创建的元素。

Answer 2

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元素，你也可以跳过解析/追加的东西，就像那些不需要的那样。

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

2 个答案: