Verify whether the div already includes a particular item

Question

Verify whether the div already includes a particular item

I am currently working on an angular project where I need a button to add a blockquote within a div, but only if the blockquote is not already present in the HTML structure.

My initial approach was to search for the specific string

<blockquote id='myBlockquote'>

within the HTML content using the code snippet below, however, it does not seem to be functioning as expected:

if ((myHTML.indexOf('<blockquote id="myBlockquote">') = -1)) {
  myHTML.append('some HTML');
}

I'm clearly missing something here. Can someone point me in the right direction?

Thanks!

javascript jquery html css angularjs

Answer 1

Answer №1

One way to ensure that your desired element exists is by checking its length with the use of .length, and then proceed to append it.

if(myHTML.find('#myBlockquote').length > 0) {
  myHTML.append('some more HTML');
}

Answer 2

One way to ensure that your desired element exists is by checking its length with the use of .length, and then proceed to append it.

if(myHTML.find('#myBlockquote').length > 0) {
  myHTML.append('some more HTML');
}

Answer 3

Answer №2

It is recommended not to manipulate the DOM directly from the controller as it should be handled by the view.

To achieve this, create an array within the scope that contains the blockquotes:

$scope.blockquotes = [{id: 1, text: "This is a blockquote"}, {id: 2, text: "This is a blockquote"}, {id: 3, text: "This is a blockquote"}];

You can also create a function that is triggered on click to check if a particular user has already added a blockquote:

$scope.addBlockquote = function(userId) {
  var found = false;
  for(var i = 0; i < $scope.blockquotes.length; i++) {
    if ($scope.blockquotes[i].id == userId) {
      found = true;
      break;
    }
  }
}

In your view or HTML template, loop through the blockquotes array and display them accordingly:

<blockquote ng-repeat="quote in blockquotes">{{quote.text}}</blockquote>

Answer 4

It is recommended not to manipulate the DOM directly from the controller as it should be handled by the view.

To achieve this, create an array within the scope that contains the blockquotes:

$scope.blockquotes = [{id: 1, text: "This is a blockquote"}, {id: 2, text: "This is a blockquote"}, {id: 3, text: "This is a blockquote"}];

You can also create a function that is triggered on click to check if a particular user has already added a blockquote:

$scope.addBlockquote = function(userId) {
  var found = false;
  for(var i = 0; i < $scope.blockquotes.length; i++) {
    if ($scope.blockquotes[i].id == userId) {
      found = true;
      break;
    }
  }
}

In your view or HTML template, loop through the blockquotes array and display them accordingly:

<blockquote ng-repeat="quote in blockquotes">{{quote.text}}</blockquote>

Answer 5

Answer №3

It appears that myHTML is a string and not a DOM object. One way to check for the existence of an element within it is by converting the string to HTML and then searching for the element:

var elements = $(myHTML);
if(!$('#myBlockquote', elements).length){
   //The element does not exist.
}

Answer 6

It appears that myHTML is a string and not a DOM object. One way to check for the existence of an element within it is by converting the string to HTML and then searching for the element:

var elements = $(myHTML);
if(!$('#myBlockquote', elements).length){
   //The element does not exist.
}

Verify whether the div already includes a particular item

Answer №1

Answer №2

Answer №3

Similar questions

How to enlarge the size of specific letters in HTML

Using CSS Grid to Create Three Rows of Equal Height

Header and footer on iPad are not extending to full width even when set to 100% width

Revise website design to adjust dynamically according to screen dimensions

The location of the CHROMEDRIVER for Node.js with Selenium

Creating a list element after clicking in ReactJS is achieved by using event handlers in

Troubleshooting problem in Java related to encoding with XMLHttpRequest

Utilizing an array interpolation method within a Postgres query in JavaScript

Locate the specific version of a JavaScript library within compiled JS files

Executing PHP script within a Node.js socket server program

Incorporating Angular into the script code of the extension content

Determine the item in a collection of objects that contains a specific key

Can DOM addEventListener be effectively implemented alongside JQuery events?

Elevate a specific element above others and stagger the positioning of certain elements by pushing them downwards

Calculate the total amount based on the selected value from the radio button

Transitioning to a bootstrap or fluid design from a foundation of simple HTML and CSS

Certain functionalities of Bootstrap may not be functioning properly within an Angular 6 project

"Exploring the best method to send an AJAX callback to a particular div that has been dynamically generated using

How can I adjust the size and alignment of each line within a single cell in an HTML table?

How to insert a value using jQuery Minicolors in an HTML document?