Через JS я создаю элемент и даю ему атрибуты но после этого когда я хочу его найти у меня ничего не находит.
В просмотре кода элемента (В chrome) созданные элементы отображаться а в просмотре кода страницы нет.
Дополню ответ развернуто.
Есть HTML
<button class="button button--line button--effect-1">
<span class="morph-shape">
<svg>
<path d="M286.5,113c0,0-104,0-136.5,0c-35.75,0-136.5,0-136.5,0s0-39.417,0-52.5c0-12.167,0-48.5,0-48.5s101.833,0,136.5,0c33.583,0,136.5,0,136.5,0s0,35.917,0,48.5C286.5,73.167,286.5,113,286.5,113z"/>
</svg>
</span>
<span class="button__text">Press me</span>
</button>
Есть JS
document.querySelector('.morph-shape').setAttribute('data-morph-active', 'M286,113c0,0-68.8,9-136,9c-78.2,0-137-9-137-9S3,97.198,3,62.5C3,33.999,13,12,13,12S72,2,150,2c85,0,136,10,136,10s11,17.598,11,52C297,96.398,286,113,286,113z');
document.querySelector('.morph-shape').setAttribute('data-morph-reset', 'M286.5,113c0,0-104,0-136.5,0c-35.75,0-136.5,0-136.5,0s0-39.417,0-52.5c0-12.167,0-48.5,0-48.5s101.833,0,136.5,0c33.583,0,136.5,0,136.5,0s0,35.917,0,48.5C286.5,73.167,286.5,113,286.5,113z');
var svg = document.createElement('svg');
var path = document.createElement('path');
document.querySelector('.morph-shape').appendChild(svg);
document.querySelector('.morph-shape svg').appendChild(path);
document.querySelector('.morph-shape svg path').setAttribute('d', 'M286.5,113c0,0-104,0-136.5,0c-35.75,0-136.5,0-136.5,0s0-39.417,0-52.5c0-12.167,0-48.5,0-48.5s101.833,0,136.5,0c33.583,0,136.5,0,136.5,0s0,35.917,0,48.5C286.5,73.167,286.5,113,286.5,113z');
(function() {
function extend( a, b ) {
for( var key in b ) {
if( b.hasOwnProperty( key ) ) {
a[key] = b[key];
}
}
return a;
}
function SVGButton( el, options ) {
this.el = el;
this.options = extend( {}, this.options );
extend( this.options, options );
this.init();
}
SVGButton.prototype.options = {
speed : { reset : 800, active : 150 },
easing : { reset : mina.elastic, active : mina.easein }
};
SVGButton.prototype.init = function() {
this.shapeEl = this.el.querySelector( 'span.morph-shape' );
var s = Snap( this.shapeEl.querySelector( 'svg' ) );
this.pathEl = s.select( 'path' );
this.paths = {
reset : this.shapeEl.getAttribute( 'data-morph-reset' ),
active : this.shapeEl.getAttribute( 'data-morph-active' )
};
this.initEvents();
};
SVGButton.prototype.initEvents = function() {
this.el.addEventListener( 'mousedown', this.down.bind(this) );
this.el.addEventListener( 'touchstart', this.down.bind(this) );
this.el.addEventListener( 'mouseup', this.up.bind(this) );
this.el.addEventListener( 'touchend', this.up.bind(this) );
this.el.addEventListener( 'mouseout', this.up.bind(this) );
};
SVGButton.prototype.down = function() {
this.pathEl.stop().animate( { 'path' : this.paths.active }, this.options.speed.active, this.options.easing.active );
};
SVGButton.prototype.up = function() {
this.pathEl.stop().animate( { 'path' : this.paths.reset }, this.options.speed.reset, this.options.easing.reset );
};
[].slice.call( document.querySelectorAll( 'button.button--effect-1' ) ).forEach( function( el ) {
new SVGButton( el );
} );
[].slice.call( document.querySelectorAll( 'button.button--effect-2' ) ).forEach( function( el ) {
new SVGButton( el, {
speed : { reset : 650, active : 650 },
easing : { reset : mina.elastic, active : mina.elastic }
} );
} );
})();
Если я создаю тег SVG с PATH js'ом то скрипт у меня ничего не находит. В некоторых функциях возвращается null.
я понимаю, что возможно надо дать чуть больше кода но надеюсь моя ситуация понятна.
Конкретно здесь выдает ошибку
this.pathEl.stop().animate( { 'path' : this.paths.active }, this.options.speed.active, this.options.easing.active );
};
Он не видел path и все.
Opera 39, Chrome 54, IE 11
