Как найти динамический DOM элемент?

Question

[Ярослав Иванов]

Через 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 и все.

Comments

[Kovalsky]

Делайте пример на jsfiddle

[Ярослав Иванов]

То, что я сейчас дописал будет достаточно ? если надо то сделаю пример на jsfiddle

Answer 1

[Алексей Немиро]

var element = document.createElement('div');
element.id = 'test'; // уникальный идентификатор элемента
element.innerHTML = 'создан новый элемент';

document.body.appendChild(element);

// получаем по идентификатору добавленный элемент
document.getElementById('test').innerHTML = 'изменено содержимое созданного элемента';

https://jsfiddle.net/alekseynemiro/x76s8zsy/1/

В просмотре кода страницы динамически созданных элементов не будет, т.к. содержимое страницы - это то, что было получено от сервера, а JavaScript работает на стороне клиента.

---

Дополню ответ в соответствии с обновлением текста вопроса.

Получить path можно:

1. По ссылке, в переменной path:

console.log('path', path);

2. Найти с помощью document.querySelector, например по имени класса:

var path = document.createElement('path');
path.className = 'anyClass';

console.log('path', document.querySelector('.anyClass'));

3. По идентификатору, как показано в самом первом примере:

var path = document.createElement('path');
path.id= 'path';

console.log('path', document.getElementById('path'));

4. По имени тега, но придется еще что-то проверять, поскольку на выходе будут все элементы path:

console.log('path', document.getElementsByTagName('path'));

PS: У меня ваш код работает без ошибок:
https://jsfiddle.net/alekseynemiro/voyj5rt1/
Используется Snap.svg v0.4.1

Opera 39, Chrome 54, IE 11

---

Обновление по результатам обсуждения проблемы в комментариях:

Проблема в том, что создавать SVG-элементы нужно с указанием пространства имен, с помощью метода document.createElementNS:

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');

https://jsfiddle.net/alekseynemiro/voyj5rt1/4/

Comments

[Anton fon Faust]

Даже можно обойтись без этого:
document.getElementById('test').innerHTML = 'изменено содержимое созданного элемента';
т.к. ссылку на него вы уже сохранили в element при создании.
Можно сразу использовать element.innerHTML = 'изменено содержимое созданного элемента';

[Алексей Немиро]

Anton fon Faust: это в качестве примера поиска созданного элемента. Доступ по ссылке - самое очевидное решение.

Судя по добавленным фрагментам кода, для данной ситуации вполне сгодится решение с использованием ссылки на созданный элемент.

[Ярослав Иванов]

Спасибо за глубокое погружение в суть вопроса.

https://jsfiddle.net/voyj5rt1/2/ Вот в этой ссылке я убрал из html svg и path.
В JS у меня создается svg и path с нужными атрибутами но как видно не работает и выдает еще ошибки в консоли. Мой вопрос в этом и состоял. Как заставить работать скрипт, который обращается к динамическим элементам. Если в HTML уже прописаны SVG то все работает а если из JS создаешь то он их не видит.

[Алексей Немиро]

Ярослав Иванов: да, вижу пару ошибок:
snap.svg-min.js:19 Error: <svg> attribute height: Expected length, "undefined".d @
Error: <svg> attribute width: Expected length, "[object HTMLUnkn…".

Создание элемента через document.createElementNS убирает эти ошибки:

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');

но на выходе результат отличается от ожидаемого :-)

[Алексей Немиро]

вот решение:

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');

https://jsfiddle.net/alekseynemiro/voyj5rt1/4/

[Ярослав Иванов]

Алексей, Вы волшебник.

[Ярослав Иванов]

"но на выходе результат отличается от ожидаемого :-)" Разницы не заметил

[Алексей Немиро]

Ярослав Иванов: это в первой версии :-), указанные ошибки исчезли, когда svg был создан через createElementNS, но кнопка была просто серой. Сам path тоже нужно было через createElementNS создавать и это полностью решило проблему.

[Ярослав Иванов]

а можете в двух словах рассказать как работает createElementNS ? быстрое гугление рассказывает как создавать но не как работает и в чем разница от createElement. Спасибо :)

[Алексей Немиро]

Ярослав Иванов: проблема в том, что SVG не входит в пространство имен HTML.

Функция createElement - создает элементы, которые входят в HTML.

Функция createElementNS предназначена для создания элементов, которые не являются частью пространства имен HTML.

Answer 2

[Rou1997]

В просмотре кода страницы его и не будет, это ответ сервера. а JavaScript выполняется уже после, и только в браузере.
Вы что хотите сделать-то?

Comments

[Ярослав Иванов]

Я хочу обратится к созданному элементу. В вопросе добавил код.