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

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 元素，您也可以跳过 parsing/appending 内容，因为那不是必需的。

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

how to initialize variable in javascript with HTML code directly

html

javascript

svg

snap.svg